【CSS3中的動畫功能】

/* 1.Transition功能，通過指定開始結束狀態來過度，無法實現復雜動畫。*/ /* transition:property duration timing-function */ transition-property: background-color; transition-duration: 3s; transition-timing-function: linear;transition: background-color 3s linear; /*簡潔的寫法*/transition: background-color 1s linear,color 1s linear,width 1s linear; /* 同時執行多個動畫效果 *//* 2.Animations功能，可以指定幀，實現復雜的動畫。 */ @-webkit-keyframes mycolor {0% /*開始幀*/{background-color:red;}40% /*背景顏色變化幀 - 黃色*/{background-color:#ffff00;}70% /*背景顏色變化幀 - 藍色*/{background-color:aqua;}100% /*結束幀*/{background-color:red;} } div:hover {-webkit-animation:mycolor 5s linear; }/* 實現多個屬性值同時改變的動畫 */ @-webkit-keyframes mycolor {0%{background-color:Red;transform:rotate(0deg);}30%{background-color:aqua;transform:rotate(30deg);}60%{background-color:lightskyblue;transform:rotate(-30deg);}100%{background-color:Red;transform:rotate(0deg);} } div:hover {-webkit-animation-name:mycolor;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear; }/*參數含義*//* linear:勻速 ease-in:又慢到快 ease-out:由快到慢 ease:先慢再快再慢 ease-in-out:先慢再快再慢*/ View Code

?

轉載于:https://www.cnblogs.com/crayonchen/p/4929942.html

總結

以上是生活随笔為你收集整理的CSS 动画功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。