動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。可通過設置多個節點來精確控制一個或一組動畫，常用來實現復雜的動畫效果。0% 是動畫的開始，100% 是動畫的完成。
1、定義動畫軌跡
@keyframes 動畫名稱{
from{
動畫初始狀態
}
to{
動畫結束狀態
}
}
//---兼容寫法
@-moz-keyframes
@-webkit-keyframes
@-o-keyframes
/* 使用百分比可以實現動畫連續執行*/
@keyframes 動畫名 {
0%{
}
50%{
}
100%{
}
}
2、調用動畫
animation: name duration timing-function delay iteration-count direction;
animation-name動畫名稱
animation-duration完成動畫所花費的時間
animation-timing-function規定動畫的速度曲線。
inear勻速
ease低速/加快/變慢
ease-in低速開始
ease-out低速結束
ease-in-out低速開始和結束。
animation-delay動畫開始之前的延遲。
animation-iteration-count動畫應該播放的次數。
animation-direction是否應該輪流反向播放動畫。
normal 正常播放
reverse 反向播放
alternate 奇數次正向，偶數次反向。
alternate-reverse 奇數次反向，偶數次正向
遠近互聯前端小華整理發布，希望能對學習技術的你有所幫助
遠近互聯專業提供網站建設、APP開發、網站優化、外貿網站SEO、微信運營的品牌整合營銷服務讓客戶通過網絡品牌建立與網絡傳播提高業績。
