@keyframes屬性解釋和用法

更新時間:2021-11-02 來源:黑馬程序員瀏覽量:

CSS3除了支持漸變、過渡和轉換特效外，還可以實現(xiàn)強大的動畫效果。在CSS3中，使用animation屬性可以定義復雜的動畫。

@keyframes

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

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

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

● animationname: 表示當前動畫的名稱，它將作為引用時的唯一標識，因此不能為空。

● keyframes-selector: 關鍵幀選擇器，即指定當前關鍵幀要應用到整個動畫過程中的位置，值可以是一個百分比、from或者to。其中，from和0%效果相同表示動畫的開始，to和100%效果相同表示動畫的結束。

● css-styles: 定義執(zhí)行到當前關鍵幀時對應的動畫狀態(tài)，由CSS樣式屬性進行定義，多個屬性之間用分號分隔，不能為空。

例如，使用@keyframes屬性可以定義一個淡入動畫，示例代碼如下。

@keyframes 'appear'
{
    0%{opacity: 0;}　　　/*動畫開始時的狀態(tài)，完全透明*/
    100%{opacity: 1;}　　/*動畫結束時的狀態(tài)，完全不透明*/
}

上述代碼創(chuàng)建了一個名為apper的動畫，該動畫在開始時opacity為0（透明），動畫結束時opacity為1（不透明）。該動畫效果還可以使用等效代碼來實現(xiàn)，具體如下。

@keyframes 'appear'
{
    from{opacity: 0;}　　　/*動畫開始時的狀態(tài)，完全透明*/
    to{opacity: 1;}　　　　/*動畫結束時的狀態(tài)，完全不透明*/
}

另外，如果需要創(chuàng)建一個淡入淡出的動畫效果，可以通過如下代碼實現(xiàn)，具體如下。

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

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

注意:

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

animation-name屬性

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

animation-name: keyframename | none;

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

animation-duration屬性

animation-duration屬性用于定義整個動畫效果完成所需要的時間，以秒或毫秒計，其基本語法格式如下。

animation-duration: time;

在上述語法中，animation-duration屬性初始值為0，適用于所有塊元素和行內元素。time參數是以秒(s)或者毫秒(ms)為單位的時間，默認值為0，表示沒有任何動畫效果。當值為負數時，則被視為0。

下面通過一個案例來演示animation-name及animation-duration屬性的用法，如下所示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>黑馬程序員web前端開發(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屬性定義要應用的動畫名稱，使用animation-duration屬性定義整個動畫效果完成所需要的時間。另外，使用form和to函數指定當前關鍵幀要應用動畫過程中的位置。

動畫開始時的效果如下圖所示。

1635845646964_CSS動畫.gif