這篇文章主要介紹了CSS3中@keyframes簡(jiǎn)單動(dòng)畫的實(shí)現(xiàn)方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)青島免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

CSS3 @keyframes簡(jiǎn)單動(dòng)畫實(shí)現(xiàn)

定義：

通過(guò) @keyframes 規(guī)則，能夠創(chuàng)建動(dòng)畫。

創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

在動(dòng)畫過(guò)程中，可以多次改變這套 CSS 樣式。

以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。

0% 是動(dòng)畫的開(kāi)始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。

為了獲得最佳的瀏覽器支持，應(yīng)始終定義 0% 和 100% 選擇器。

重要：兼容問(wèn)題！@keyfrmes 不兼容IE 9 and 以及更早版本的瀏覽器.

語(yǔ)法：

@keyframes animationname {keyframes-selector {css-styles;}}

@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;}
}
//多個(gè)特性變化，用;隔開(kāi).

@-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動(dòng)畫方法：

選擇器

{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示無(wú)限次循環(huán)，也可設(shè)置次數(shù)n：
                                           animation-interation-count:n*/ 
}

總結(jié)：@keyframes與animation密切相關(guān)，如想透徹掌握，還需對(duì)照animation用法一起學(xué)習(xí)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3中@keyframes簡(jiǎn)單動(dòng)畫的實(shí)現(xiàn)方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!