css3動畫有哪些屬性

css3動畫屬性有：“@keyframes”、animation、animation-name、animation-duration、animation-delay、animation-direction等等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3動畫屬性：

• @keyframes 規(guī)定動畫。

• animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

• animation-name 規(guī)定 @keyframes 動畫的名稱。

• animation-duration 規(guī)定動畫完成一個周期所花費的秒或毫秒。默認(rèn)是 0。

• animation-timing-function 規(guī)定動畫的速度曲線。默認(rèn)是 "ease"。

• animation-delay 規(guī)定動畫何時開始。默認(rèn)是 0。

• animation-iteration-count 規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1。

• animation-direction 規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。

• animation-play-state 規(guī)定動畫是否正在運行或暫停。默認(rèn)是 "running"。

• animation-fill-mode 規(guī)定對象動畫時間之外的狀態(tài)。

示例：使用css3動畫屬性制作簡單動畫

body {   background-color: #fff;   color: #555;   font-size: 1.1em;   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .container {   margin: 50px auto;   min-width: 320px;   max-width: 500px; }  .element {   margin: 0 auto;   width: 100px;   height: 100px;   background-color: #0099cc;   border-radius: 50%;   position: relative;   top: 0;   -webkit-animation: bounce 2s infinite;   animation: bounce 2s infinite; }  @-webkit-keyframes bounce {   from {     top: 100px;     -webkit-animation-timing-function: ease-out;     animation-timing-function: ease-out;   }   25% {     top: 50px;     -webkit-animation-timing-function: ease-in;     animation-timing-function: ease-in;   }   50% {     top: 150px;     -webkit-animation-timing-function: ease-out;     animation-timing-function: ease-out;   }   75% {     top: 75px;     -webkit-animation-timing-function: ease-in;     animation-timing-function: ease-in;   }   to {     top: 100px;   } }  @keyframes bounce {   from {     top: 100px;     -webkit-animation-timing-function: ease-out;     animation-timing-function: ease-out;   }   25% {     top: 50px;     -webkit-animation-timing-function: ease-in;     animation-timing-function: ease-in;   }   50% {     top: 150px;     -webkit-animation-timing-function: ease-out;     animation-timing-function: ease-out;   }   75% {     top: 75px;     -webkit-animation-timing-function: ease-in;     animation-timing-function: ease-in;   }   to {     top: 100px;   } }

3、運行效果

（學(xué)習(xí)視頻分享：css視頻教程）