轉載自 w3school
屬性 |
描述 |
CSS |
定義動畫 |
3 |
|
所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。 |
3 |
|
規定 @keyframes 動畫的名稱。 |
3 |
|
規定動畫完成一個週期所花費的秒或毫秒。 |
3 |
|
規定動畫的速度曲線。 |
3 |
|
規定動畫何時開始。 |
3 |
|
規定動畫被播放的次數。 |
3 |
|
規定動畫是否在下一週期逆向地播放。 |
3 |
|
規定動畫是否正在運行或暫停。 |
3 |
|
規定對象動畫時間之外的狀態。 |
3 |
@keyframes animationname {keyframes-selector {css-styles;}}
keyframes-selector:動畫時長的百分比。
合法的值:0-100%;from(與 0% 相同);to(與 100% 相同)
例子:
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px;left:0px; background:red;}
}
@-moz-keyframesmymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px;left:0px; background:red;}
}
@-webkit-keyframesmymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px;left:0px; background:red;}
}
@-o-keyframesmymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px;left:0px; background:red;}
}
animation: name duration timing-function delay iteration-count direction;
animation-timing-function: value;
linear |
動畫從頭到尾的速度是相同的。 |
ease |
默認。動畫以低速開始,然後加快,在結束前變慢。 |
ease-in |
動畫以低速開始。 |
ease-out |
動畫以低速結束。 |
ease-in-out |
動畫以低速開始和結束。 |
cubic-bezier(n,n,n,n) |
在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。 |
JavaScript 語法:object.style.animationTimingFunction="linear"
animation-delay: time;
允許負值,-2s 使動畫馬上開始,但跳過 2 秒進入動畫。
JavaScript 語法:object.style.animationDelay="2s"
animation-iteration-count: n|infinite
infinite: 規定動畫應該無限次播放
JavaScript 語法:object.style.animationIterationCount=3
animation-play-state: paused|running;
JavaScript 語法:object.style.animationPlayState="paused"
animation-fill-mode : none | forwards | backwards | both;
none |
不改變默認行爲。 |
forwards |
當動畫完成後,保持最後一個屬性值(在最後一個關鍵幀中定義)。 |
backwards |
在 animation-delay 所指定的一段時間內,在動畫顯示之前,應用開始屬性值(在第一個關鍵幀中定義)。 |
both |
向前和向後填充模式都被應用。 |