CSS3 @keyframes簡單動畫實現(xiàn)
發(fā)布時間：2018-02-24 15:09:23 作者：迪迪的博客 
我要評論
我要評論這篇文章主要介紹了CSS3 @keyframes簡單動畫實現(xiàn)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
CSS3 @keyframes簡單動畫實現(xiàn)
定義：
通過 @keyframes 規(guī)則，能夠創(chuàng)建動畫。
創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，可以多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞 "from" 和 "to"，等價于 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結(jié)束時間。
為了獲得最佳的瀏覽器支持，應(yīng)始終定義 0% 和 100% 選擇器。
重要：兼容問題！@keyfrmes 不兼容IE 9 and 以及更早版本的瀏覽器.
語法：
@keyframes animationname {keyframes-selector {css-styles;}}
| animationname | 必需。定義動畫的名稱。 |
| keyframes-selector |
必需。動畫時長的百分比。 合法的值：
|
| css-styles | 必需。一個或多個合法的 CSS 樣式屬性。 |
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
//多個特性變化，用;隔開.
@-webkit-keyframes mymove{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
使用mymove動畫方法：
選擇器
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示無限次循環(huán)，也可設(shè)置次數(shù)n：
animation-interation-count:n*/
}
總結(jié)：@keyframes與animation密切相關(guān)，如想透徹掌握，還需對照animation用法一起學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解CSS動畫屬性關(guān)鍵幀keyframes全解析
這篇文章主要介紹了詳解CSS動畫屬性關(guān)鍵幀keyframes全解析的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-09CSS3中的@keyframes關(guān)鍵幀動畫的選擇器綁定
@keyframes可以幫助我們進行類似Flash中的關(guān)鍵幀動畫制作,這里我們來簡單討論一下CSS3中的@keyframes關(guān)鍵幀動畫的選擇器綁定,需要的朋友可以參考下2016-06-13@keyframes規(guī)則實現(xiàn)多重背景的CSS動畫
這篇文章主要介紹了@keyframes規(guī)則實現(xiàn)多重背景的CSS動畫,代碼中使用的是效果圖中顯示的素材,僅作為腳本示例在此便不提供下載了,需要的朋友可以參考下2015-08-05- CSS3新增動畫屬性“@keyframes”，從字面就可以看出其含義——關(guān)鍵幀，這與Flash中的含義一致。利用CSS3制作動畫效果其原理與Flash一樣，我們需要定義關(guān)鍵幀處的狀態(tài)效果，2014-09-02
快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏)
這篇文章主要介紹了快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以2020-02-25
