一、注意事項： 1. 如需學習css動畫，必須先掌握@keyframes的規則，在@keyframes 中規定某項Css樣式，就能創建由當前樣式逐漸該為新樣式的動畫效果 2. 在使用@keyframes規則時，需要注意瀏覽器的兼容性問題，不同瀏覽器兼容性不同： Internet Explorer 10、Firefox以及支持@keyframes規則和animation屬性 Chrome和Sagari需要前綴-Webkit- 二、選擇器 1. 當在@keyframes中創建動畫時，需要將它捆綁到某個選擇器，否則不會產生動畫效果 2 通過至少規定以下兩個動畫屬性，就可以將動畫綁定到選擇器.：

• 規定動畫的名稱
• 規定動畫的時長

例如：把名為first 時長為5s的動畫捆綁到div元素上： 3.在設置動畫變化所發生的時間時：可以使用”from“和”to“，當然也可以使用 0%和 100% 0%代表動畫開始 100%代表動畫結束 例如：將div從開始的位置移動到向左外邊距為100px的位置： 和上面的動畫效果一樣，但動畫法傷時間使用的是 “fron” 和“to” 在上面動畫效果的基礎上，還可以細分時間段，產生更多的動畫效果，例如

轉載于:https://www.cnblogs.com/Hubert-dzl/p/11060745.html

總結

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

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