@keyframes屬性解釋和用法

更新時(shí)間:2021-11-02 來(lái)源:黑馬程序員瀏覽量:

CSS3除了支持漸變、過(guò)渡和轉(zhuǎn)換特效外，還可以實(shí)現(xiàn)強(qiáng)大的動(dòng)畫(huà)效果。在CSS3中，使用animation屬性可以定義復(fù)雜的動(dòng)畫(huà)。

@keyframes

使用動(dòng)畫(huà)之前必須先定義關(guān)鍵幀，一個(gè)關(guān)鍵幀表示動(dòng)畫(huà)過(guò)程中的一個(gè)狀態(tài)。在CSS3中，@keyframes規(guī)則用于創(chuàng)建動(dòng)畫(huà)。在@keyframes中規(guī)定某項(xiàng)CSS樣式，就能創(chuàng)建由當(dāng)前樣式逐漸變?yōu)樾聵邮降膭?dòng)畫(huà)效果。@keyframes屬性的語(yǔ)法格式如下。

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

在上面的語(yǔ)法格式中，@keyframes屬性包含的參數(shù)具體含義如下。

● animationname: 表示當(dāng)前動(dòng)畫(huà)的名稱，它將作為引用時(shí)的唯一標(biāo)識(shí)，因此不能為空。

● keyframes-selector: 關(guān)鍵幀選擇器，即指定當(dāng)前關(guān)鍵幀要應(yīng)用到整個(gè)動(dòng)畫(huà)過(guò)程中的位置，值可以是一個(gè)百分比、from或者to。其中，from和0%效果相同表示動(dòng)畫(huà)的開(kāi)始，to和100%效果相同表示動(dòng)畫(huà)的結(jié)束。

● css-styles: 定義執(zhí)行到當(dāng)前關(guān)鍵幀時(shí)對(duì)應(yīng)的動(dòng)畫(huà)狀態(tài)，由CSS樣式屬性進(jìn)行定義，多個(gè)屬性之間用分號(hào)分隔，不能為空。

例如，使用@keyframes屬性可以定義一個(gè)淡入動(dòng)畫(huà)，示例代碼如下。

@keyframes 'appear'
{
    0%{opacity: 0;}　　　/*動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)，完全透明*/
    100%{opacity: 1;}　　/*動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)，完全不透明*/
}

上述代碼創(chuàng)建了一個(gè)名為apper的動(dòng)畫(huà)，該動(dòng)畫(huà)在開(kāi)始時(shí)opacity為0（透明），動(dòng)畫(huà)結(jié)束時(shí)opacity為1（不透明）。該動(dòng)畫(huà)效果還可以使用等效代碼來(lái)實(shí)現(xiàn)，具體如下。

@keyframes 'appear'
{
    from{opacity: 0;}　　　/*動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)，完全透明*/
    to{opacity: 1;}　　　　/*動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)，完全不透明*/
}

另外，如果需要?jiǎng)?chuàng)建一個(gè)淡入淡出的動(dòng)畫(huà)效果，可以通過(guò)如下代碼實(shí)現(xiàn)，具體如下。

@keyframes 'appeardisappear'
{
    from，to{opacity: 0;}　　/*動(dòng)畫(huà)開(kāi)始和結(jié)束時(shí)的狀態(tài)，完全透明*/
    20%，80%{opacity: 1;}　/*動(dòng)畫(huà)的中間狀態(tài)，完全不透明*/
}

在上述代碼中，為了實(shí)現(xiàn)淡入淡出的效果，需要定義動(dòng)畫(huà)開(kāi)始和結(jié)束時(shí)元素不可見(jiàn)，然后漸漸淡出，在動(dòng)畫(huà)的20%處變得可見(jiàn)，然后動(dòng)畫(huà)效果持續(xù)到80%處，再慢慢淡出。

注意:

Internet Explorer 9，以及更早的版本，不支持@keyframe規(guī)則或animation屬性。InternetExplorer 10、Firefox 以及Opera 支持@keyframes規(guī)則和animation屬性。

animation-name屬性

animation-name屬性用于定義要應(yīng)用的動(dòng)畫(huà)名稱，為@keyframes 動(dòng)畫(huà)規(guī)定名稱。其基本語(yǔ)法格式如下。

animation-name: keyframename | none;

在上述語(yǔ)法中，animation-name屬性初始值為none，適用于所有塊元素和行內(nèi)元素。keyframename參數(shù)用于規(guī)定需要綁定到選擇器的keyframe的名稱，如果值為none，則表示不應(yīng)用任何動(dòng)畫(huà)，通常用于覆蓋或者取消動(dòng)畫(huà)。

animation-duration屬性

animation-duration屬性用于定義整個(gè)動(dòng)畫(huà)效果完成所需要的時(shí)間，以秒或毫秒計(jì)，其基本語(yǔ)法格式如下。

animation-duration: time;

在上述語(yǔ)法中，animation-duration屬性初始值為0，適用于所有塊元素和行內(nèi)元素。time參數(shù)是以秒(s)或者毫秒(ms)為單位的時(shí)間，默認(rèn)值為0，表示沒(méi)有任何動(dòng)畫(huà)效果。當(dāng)值為負(fù)數(shù)時(shí)，則被視為0。

下面通過(guò)一個(gè)案例來(lái)演示animation-name及animation-duration屬性的用法，如下所示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>黑馬程序員web前端開(kāi)發(fā)課程 http://web.itheima.com</title> 
    <style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation:mymove 5s infinite;
        -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    }

    @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;}
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在上面案例中，分別使用animation-name屬性定義要應(yīng)用的動(dòng)畫(huà)名稱，使用animation-duration屬性定義整個(gè)動(dòng)畫(huà)效果完成所需要的時(shí)間。另外，使用form和to函數(shù)指定當(dāng)前關(guān)鍵幀要應(yīng)用動(dòng)畫(huà)過(guò)程中的位置。

動(dòng)畫(huà)開(kāi)始時(shí)的效果如下圖所示。

1635845646964_CSS動(dòng)畫(huà).gif