css3動畫屬性有：「@keyframes」、animation、animation-name、animation-duration、animation-delay、animation-direction等等。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3動畫屬性：
@keyframes 規定動畫。
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。預設是 0。
animation-timing-function 規定動畫的速度曲線。預設是 "ease"。
animation-delay 規定動畫何時開始。預設是 0。
animation-iteration-count 規定動畫播放的次數。預設是 1。
animation-direction 規定動畫是否在下一週期逆向播放。預設是 "normal"。
animation-play-state 規定動畫是否正在運作或暫停。預設是 "running"。
animation-fill-mode 規定物件動畫時間以外的狀態。
範例：使用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、執行效果
以上是css3動畫有哪些屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
