CSS 用于控制網(wǎng)頁的樣式和布局CSS3 是最新的 CSS 標準翅溺。 ? CSS Animation動畫效果將會影響元素相對應(yīng)的css值章贞，在整個動畫過程中动漾，元素的變化屬性值完全是由animation來控制创译，動畫后面的會覆蓋前面的屬性值.
?例：
.demo1{
? ? ? ? ? ? ?width:50px;
? ? ? ? ? ? height:50px;
? ? ? ? ? ? margin-left:100px;
? ? ? ? ? ?background:blue;
? ? ? ? ? -webkit-animation-name:'wobble';/*動畫屬性名店溢，也就是我們前面keyframes定義的動畫名*/
? ? ? ? ? -webkit-animation-duration:10s;/*動畫持續(xù)時間*/
? ? ? ? ? ?-webkit-animation-timing-function:ease-in-out;/*動畫頻率酒唉，和transition-timing-function是一樣的*/
? ? ? ? ? ?-webkit-animation-delay:2s;/*動畫延遲時間*/
? ? ? ? ? ?-webkit-animation-iteration-count:10;/*定義循環(huán)資料箫老，infinite為無限次*/
? ? ? ? ? ?-webkit-animation-direction:alternate;/*定義動畫方式*/}
? ?css3animation動畫屬性：
? ?@keyframes規(guī)定動畫。
? ? ? ? 例子：@keyframes myfirst
? ? ? ? ? ? ? ? {
? ? ? ? ? ? from {background: red;}
? ? ? ? ? ? to {background: yellow;}}
? ? ? ? @-moz-keyframes myfirst/* Firefox */
? ? ? ? ?{
? ? ? ?from {background: red;}
? ? ? ?to {background: yellow;}}
? ? ? ?@-webkit-keyframes myfirst/* Safari 和 Chrome */
? ? ? ?{
? ? ? ? ? from {background: red;}
? ? ? ? ? to {background: yellow;}}
? ? ? ? @-o-keyframes myfirst/* Opera */
? ? {
? ? ? from {background: red;}
? ? ?to {background: yellow;}
? ? ? ?}
? ? anmation:所有動畫屬性的簡寫屬性黔州，除了 animation-play-state 屬性耍鬓。
? ?animation-name:規(guī)定需要綁定到選擇器的 keyframe 名稱.
? ?animation-duration:規(guī)定完成動畫所花費的時間，以秒或毫秒計.
? ?animation-delay:規(guī)定在動畫開始之前的延遲.
? ?animation-iteration-count:規(guī)定動畫應(yīng)該播放的次數(shù).
? ?animation-direction:規(guī)定是否應(yīng)該輪流反向播放動畫.
? animation-play-state:屬性規(guī)定動畫正在運行還是暫停.
? animation-fill-mode:屬性規(guī)定動畫在播放之前或之后流妻，其動畫效果是否可見.
? animation-timing-function:規(guī)定動畫的速度曲線牲蜀。
