【CSS 】动画animation
作為博主簡單記錄： 深入學習請查看文末參考資料
前面有提到過過渡效果css transition,實際上過渡效果也可以算作一種動畫,這是這種動畫是單次的不重復的，而且過渡中我們可能需要其他精細操作辦不到，這個時候我們需要用到animation了。
舉個簡單的例子:
請嘗試上面的代碼,你會發現 hover 到第二個類名為color-change-target2 的div上的時候 背景顏色的變化 和第一個div 在頁面載入2s之后的背景顏色變化一模一樣。
好的我們直接根據上面的代碼來，@keyframes 關鍵字，這個關鍵字可以定義在這個過渡轉換中 從0-100 【這里0是轉換開始，100是轉換結束】 這個過程中 每一步的變化。實際上上面定義changeColor的代碼可以寫成這樣,他們是等價的：
@keyframes changeColor {0% {background-color:lightseagreen}100% {background-color:indianred} }我們進一步修改代碼：
@keyframes changeColor {0% {background-color:lightseagreen}50% {background-color:indianred; border-radius: 0}100% {background-color:lightseagreen;border-radius: 25px} }刷新頁面你會看到，在變化的這5s內 在第2.5s時,圓角不在變成了矩形，并且背景顏色變成了紅色。
當然你在定義的時候,完全可以設定1% 2% 3%…..并且設定不同屬性組合。當然這里面的css屬性 和 transition支持的屬性是一模一樣，也就是說這些屬性(傳送門)被設定才會有動畫效果。 MDN 參考
animation 和 transition一樣是一些列屬性的簡寫形式.
你可以加上試試這個效果：
深入學習請狠狠的點擊這個：
大漠老師 CSS3 animation
w3c animation
MDN animtaion
轉載于:https://www.cnblogs.com/dongguapifly/p/10627117.html
總結
以上是生活随笔為你收集整理的【CSS 】动画animation的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于JS的时间控制
- 下一篇： CSS布局奇淫技巧之--各种居中