CSS3或HTML5 - 我如何做一個像HTML5頁面中浮動的雲彩一樣的背景動畫？

Question

我只是想知道是否有一種方法可以在基於純CSS3的背景動畫中進行背景設計，這可能與HTML5或jQuery的一點點有關？

我可以看到一些人爲此

http://addtwitter-followers.com/

有沒有簡單的方法在CSS3做到這一點？

Answer 1

Fiddle DEMO

CSS

@keyframes animatedBackground { 
    from { 
     background-position: 0 0; 
    } 
    to { 
     background-position: 100% 0; 
    } 
} 
@-webkit-keyframes animatedBackground { 
    from { 
     background-position: 0 0; 
    } 
    to { 
     background-position: 100% 0; 
    } 
} 
@-ms-keyframes animatedBackground { 
    from { 
     background-position: 0 0; 
    } 
    to { 
     background-position: 100% 0; 
    } 
} 
@-moz-keyframes animatedBackground { 
    from { 
     background-position: 0 0; 
    } 
    to { 
     background-position: 100% 0; 
    } 
} 
#wrap { 
    height:100%; 
    width:100%; 
    background: url(http://addtwitter-followers.com/wp-content/themes/twentyten/images/bck.jpg) top no-repeat #94E3F4; 
    background-position: 0px 0px; 
    background-repeat: repeat-x; 
    animation: animatedBackground 150s linear infinite; 
    -ms-animation: animatedBackground 150s linear infinite; 
    -moz-animation: animatedBackground 150s linear infinite; 
    -webkit-animation: animatedBackground 150s linear infinite; 
} 

HTML

<div id="wrap">...</div> 

---

參考

@keyframes

animation:

animations