站長資訊網
之前的文章《H5篇：頁面中實現動畫的幾種方式？（附代碼）》中，帶大家了解頁面中實現動畫的幾種方式。下面本篇文章給大家介紹怎么使用CSS3來實現一個簡單漂亮的動畫效果，我們一起看看
復習下 css3 的動畫， 都快不會寫了，那會兒挺喜歡 flash 的，可惜了時代在前進。寫這里就當是文檔看吧
瀏覽器支持
Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性。
Safari 和 Chrome 支持替代的 -webkit-animation 屬性。
注釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。
定義和用法
animation屬性是一個簡寫屬性，用于設置六個動畫屬性：
-
animation-name
-
animation-duration
-
animation-timing-function animation-delay
-
animation-iteration-count animation-direction
語法
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 | 備注 |
|---|---|---|
| animation-timing-function | 規定動畫的速度曲線 | 可取值為 linear ，ease（淡入淡出），ease-in，ease-out ，ease-in-out，cubic-bezier(n, n, n, n) |
| animation-play-state | 規定動畫是否正在運行或暫停。 | paused 表示暫停狀態，running 表示運行狀態 |
| animation-name | 規定需要綁定到選擇器的 keyframe 名稱 | @keyframe { from {opcity:0} to {opcity:1}} |
| animation-iteration-count | 規定動畫應該播放的次數 | 可選值為 infinite（無限次）n（比如 5 次） |
| animation-fill-mode | 動畫在播放之前或之后，其動畫效果是否可見。 | none（默認） / forwards（動畫完成后） / backwards（在動畫顯示之前） / both（兩者）; |
| animation-duration | 規定完成動畫所花費的時間，以秒或毫秒計 | 必須規定否則，不執行動畫 |
| animation-direction | 規定是否應該輪流反向播放動畫 | 默認值 normal，alternate 為動畫應該輪流反向播放。左右左 |
| animation-delay | 規定在動畫開始之前的延遲 | 定義動畫開始前等待的時間，以秒或毫秒計。默認值是 0。單位為 s |
關于keyframe的定義
-
Firefox支持替代的@-moz-keyframes規則；
-
Opera支持替代的@-o-keyframes規則；
-
Safari和Chrome支持替代的@-webkit-keyframes規則；
-
取值支持 0-100% 和from，to。
@keyframes move { 0% { top: 0px; left: 0px; } 25% { top: 200px; left: 200px; } 50% { top: 100px; left: 100px; } 75% { top: 200px; left: 200px; } 100% { top: 0px; left: 0px; } } @keyframes move { from { top: 0px; left: 0px; } to { top: 0px; left: 100px; } }
demo 寫了一個例子，地球繞太陽轉
以下是代碼
<!-- html 部分 --> <div style="width:700px; "> <div class="t"> <div class="t1"></div> </div> </div>
/* css 部分 */ @keyframes t { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes t { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .t { height: 500px; width: 500px; position: relative; border-radius: 50%; transform: scale(.8); border: 1px solid #dedede; &::before { content: ""; width: 50px; height: 50px; background: radial-gradient(72px, #f00, #ff0, #080); border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-top: -25px; margin-left: -25px; box-shadow: 0 0 37px #fcff4a; } .t1 { height: 20px; border-radius: 50%; width: 20px; margin-top: -10px; top: 50%; left: -10px; background: radial-gradient(26px, #0082ff, #184608, #003ade); position: absolute; animation: t 3s infinite linear; transform-origin: 260px center; } } </style>
還有一個 demo ，在這里https://k-ui.cn
推薦學習CSS3視頻教程
