animation
animation複合屬性
animation-name: 規定動畫名稱；
animation-duration: 動畫執行完成所需時間，單位s；
animation-timing-function: 動畫運動曲線，默認為ease；
animation-timing-function:linear（勻速）
animation-timing-function:ease（慢速開始，然後加快，慢速結束）
animation-timing-function:ease-in（慢速開始）
animation-timing-function:ease-out（慢速結束）
animation-timing-function:ease-in-out（慢速開始，慢速結束）
animation-timing-function:cubic-bezier（cubic-bezier函數中自定義值）
animation-delay: 規定是否延遲執行，默認為0；
animation-iteration-count: 動畫執行次數；
animation-iteration-count: 1（一次）
animation-iteration-count: infinite（無限循環）
animation-direction: 動畫是否逆向播放，默認normal；
animation-direction: normal（默認值不反向）
animation-direction: alternate（反向）
animation-play-state: 動畫執行狀態；paused(暫停) | running(運行)
animation-fill-mode: 動畫執行完成的狀態；
animation-fill-mode: none（無動作）
animation-fill-mode: forwards（停留在執行完成的最後一幀）
animation-fill-mode: backwards（返回起始位置）
animation-fill-mode: both（向前、向後填充模式都被應用）
@keyframes name{} 執行動畫；
@keyframes name{
from{
width: 10px;
}
to{
width: 50px;
}
}
@keyframes name{
10%{
width: 10px;
}
30%{
width: 40px;
}
60%{
width: 80px;
}
100%{
width: 50px;
}
}
animation各瀏覽器兼容
更多教程關注我打開我的主頁觀看