css3動畫屬性

時間 2020-03-01

標籤 css3 css 動畫屬性欄目 CSS 简体版

原文原文鏈接

css3動畫是一個很是重要的知識點，屬性爲：animationcss

animation（動畫）與 transition（過渡）的區別是：html

transition 須要事件進行觸發，而 animation 不須要事件進行觸發，調用關鍵幀便可。css3

那麼第一步就是製做關鍵幀，其經常使用語法是：css3動畫

@keyframes 關鍵幀的名稱{ 0%{ } 20%{ } 30%{ } 40%{ } ... 100%{ } }動畫

第二步：調用關鍵幀！經常使用方法是：spa

animation:關鍵幀的名稱 ....;code

animation 是一個複合屬性，那麼它的具體屬性有哪些呢？下面我便一一講解：orm

第一個：animation-name（關鍵幀的名稱），想要調用一個關鍵幀，就必須添加關鍵幀的名稱。htm

第二個：animation-duration（動畫持續時間）單位能夠是 s、msblog

從下面的代碼能夠看出：動畫的持續時間爲4s,運動一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,img,input,p,form,fieldset,legend{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            height: 500px;
            background: gray;
            margin: 50px auto;
            position: relative;
        }
        h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s;
        }
        @keyframes h2Move{
            0%{
                left: 0;top: 0;
            }
            25%{
                left: 600px;top: 0;
            }
            50%{
                left: 600px;top: 400px;
            }
            75%{
                left: 0;top: 400px;
            }
            100%{
                left: 0;top: 0;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>
</html>

第三個：animation-timing-function 動畫運用的類型（勻速linear、加速度、減速度、貝塞爾曲線）默認爲先加速後減速。

將代碼中的h2改成以下所示，咱們能夠獲得結果：動畫持續時間4s，運動一次，運動類型爲勻速運動。

　　　　h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s linear;
        }

第四個：animation-delay （動畫開始播放的延遲時間）單位是 s、ms。

將代碼中的h2改成以下所示，咱們能夠獲得結果：動畫延遲2s播放，動畫持續時間4s，運動一次，運動類型爲勻速運動。

　　　　h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s linear 2s;
        }

第五個：animation-iteration-count 動畫運動的次數（默認狀況下運動1次） infinite(無限循環)

將代碼中的h2改成以下所示，咱們能夠獲得結果：動畫第一次播放延遲2s，動畫持續時間4s，運動無限次，運動類型爲勻速運動。

　　　　h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s linear 2s infinite;
        }

第六個：animation-direction （運動的方向）

屬性值：

- reverse：反方向運行（讓關鍵幀從後往前執行）

- alternate：動畫先正常運行再反方向運行，並持續交替運行

- alternate-reverse：動畫先反運行再正方向運行，並持續交替運行

將代碼中的h2改成以下所示，咱們能夠獲得結果： 動畫第一次播放延遲2s，動畫持續時間4s，運動無限次，運動類型爲勻速運動，運動方向爲以前的反方向。

 　　　h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s linear 2s infinite reverse;
        }

第七個：animation-play-state （動畫暫停）

屬性值：

paused暫停

running運動

在以前代碼中添加以下代碼，咱們能夠獲得結果：

動畫第一次播放延遲2s，動畫持續時間4s，運動無限次，運動類型爲勻速運動，運動方向爲以前的反方向，鼠標滑過box時動畫暫停。

　　　　h2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top: 0;
            animation: h2Move 4s linear 2s infinite reverse;
        }
        .box:hover h2{
            animation-play-state: paused;
        }

以上就是動畫的全部屬性，可是咱們經常使用它的複合屬性，即 animation：；你們只需記住每一個屬性值所表明的含義便可。

感謝您的閱讀，歡迎留下寶貴的意見！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。