動畫
使用@keyframes建立動畫內容
@keyframes 動畫名稱 {
關鍵影格選擇器1 { 眾多css樣式; }
關鍵影格選擇器2 { 眾多css樣式; }
...
}
概念類似Flash當中的關鍵影格,在動畫內建立各個位置的時候,其css樣式為何,到最後就交由瀏覽器去做補間效果。
關鍵影格選擇器的部分可使用:
1. 0-100% : 在時間的幾%時為何種css樣式。
2. from、to : 其實意思與0%和100%一樣。
上列兩種選擇器範例如下:
@keyframes myFirstAnimation
{
0%{ margin-top:0px; background-color: yellow;}
50%{ margin-top:50px; background-color: red;}
80%{ margin-top:80px; background-color: blue;}
}
@keyframes mySecondAnima
{
from{ margin-top: 20px; color: yellow;}
to{margin-top: 40px; color: blue;}
}
建立好@keyframes動畫內容後,接著就要在欲放置該動畫的CSS樣式表內加入animation屬性。
Animation屬性
Animation屬性的Syntax於下:
animation: name duration timing-function delay iteration-count direction;
animation-name: 動畫名稱;
animation-duration: 動畫作用時間; animation-duration: time ;
animation-timing-function: 動畫補間時運用的計算公式; cubic-bezier(n,n,n,n)
animation-delay: 動畫需間隔多久後才開始;
animation-iteration-count: 動畫作用次數; animation-iteration-count: n |infinite;
animation-direction: 動畫作用的方向; animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
引用:
https://goo.gl/wiawC2
https://goo.gl/MUvgUi