CSS3 @keyframes規則------簡易的載入動畫
阿新 • • 發佈:2018-12-14
好久沒用css3製作動畫效果了,今天看到個題目有關CSS3 @keyframes規則的,就來學習回顧一下:
先附上我寫得一個小載入動畫,有些醜,不過咱們要抓住重點,話說得好,不要在意細節/?:
效果圖:
程式碼(只寫了支援Safari 和 Chrome的):
html:
<div class="loading">
<span class="center-block"></span>
<span class="moving-block"></span>
</div>
css:
.loading { display: table; margin: 0 auto; position: relative; } .loading .center-block { display: block; width: 50px; height: 50px; margin: 20px; background: rgb(40, 171, 214); } .loading .moving-block { display: block; width: 10px; height: 10px; margin: 5px; background: rgb(40, 171, 214); position: absolute; animation: loading 1s linear infinite; } @-webkit-keyframes loading { 0% { top: 0; left: 0; bottom: unset; right: unset; } 25% { top: 0; left: unset; bottom: unset; right: 0; } 50% { top: unset; left: unset; bottom: 0; right: 0; } 75% { top: unset; left: 0; bottom: 0; right: unset; } 100% { top: 0; left: 0; bottom: unset; right: unset; } }
CSS3 @keyframes 規則:
- 瀏覽器支援:
Internet Explorer 10、Firefox 以及 Opera 支援 @keyframes 規則和 animation 屬性。
Chrome 和 Safari 需要字首 -webkit-。
Internet Explorer 9,以及更早的版本,不支援 @keyframe 規則或 animation 屬性。
-
例項:
設定動畫:
/* Safari 和 Chrome */ @-webkit-keyframes mycolorchange { from { background: red; } to { background: yellow; } }
在我的簡易載入動畫中,用的使0%-100%這種方式,和from-to使一樣的,只不過用百分比可以轉化多次,而from-to只能變化一次(一個迴圈內)。
使用:在需要使用動畫的元素樣式中新增程式碼:
/* Safari 和 Chrome */
-webkit-animation: mycolorchange 1s infinite;
其中mycolorchange 為@keyframes 動畫名稱,1s為動畫完成一個週期所花費的秒數(可設定為毫秒),infinite為播放次數,此值代表無限。如果想看到動畫效果,至少規定動畫的名稱和時長。當然,還有一些可選項(轉自w3school):