CSS3(4)---動畫(animation)

時間 2020-01-05

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

原文原文鏈接

CSS3(4)---動畫(animation)

以前有寫過過渡：CSS3(2)--- 過渡(transition)css

我的理解二者不一樣點在於html

過渡 只能指定屬性的 開始值 與 結束值，而後在這兩個屬性值之間進行平滑過渡來實現動畫效果，所以只能實現簡單的動畫效果。css3

動畫 除了定義 開始值 和 結束值，在這之間還能夠定義多個關鍵幀以及定義每一個關鍵幀中元素的屬性值來實現複雜的動畫效果。web

1、動畫語法

一、屬性語法

語法格式動畫

animation:動畫名稱 動畫時間 運動曲線  什麼時候開始  播放次數  是否反方向;

animation 屬性是一個簡寫屬性，用於設置六個動畫屬性spa

注意: 對於一個動畫而言有兩個屬性是必須的: 動畫名稱 和 規定完成動畫所花費的時間3d

二、速度曲線屬性

語法code

animation-timing-function: linear;  /* 動畫從頭至尾的速度是相同的 */

對於動畫的速度曲線屬性，有如下屬性值:orm

三、播放次數屬性

語法htm

animation-iteration-count: n|infinite;   /* 播放n次 或者無限循環 */

對於播放次數屬性，有如下屬性值

四、輪流反向播放動畫屬性

語法

animation-direction: normal|alternate;  /* 正常播放 或者 輪流反向播放 */

對於輪流反向播放動畫屬性，有如下屬性值

2、如何使用動畫

CSS3使用動畫只須要2步:一、定義動畫；二、調用動畫；

一、定義動畫

在CSS中，在使用動畫以前，咱們必須使用@keyframes規則定義動畫。

語法

<style type="text/css">
@keyframes 動畫名 {
    0% {
        ……
    }
    100% {
        …… 
    }
}
</style>

說明 0% 表示動畫的開始，100% 表示動畫的結束。0%和100% 是必須的，不過在一個@keyframes規則中能夠由多個百分比構成，每個百分比均可以定義

自身的CSS樣式，從而造成一系列的動畫效果。若是一個動畫僅僅只有0%和100%這兩個百分比的話，這時0%和100%還可使用關鍵詞 from和to 來表明，其中0%對應的是

from，100%對應的是to。

二、調用動畫

調用動畫的語法上面已經寫過

animation:動畫名稱 動畫時間 運動曲線  什麼時候開始  播放次數  是否反方向;

這裏關鍵的點在於: 定義動畫的名稱和調用動畫的名稱必定要一致。

3、示例

一、示例

效果

這裏設置了 無限播放次數 而且 輪流反向播放。

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫</title>
    <style>

    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        left: 0;
        /*調用動畫*/
        /*animation:動畫名稱 花費時間 運動曲線  什麼時候開始  播放次數  是否反方向;*/
        animation: move 1s ease 0s infinite alternate;
    }

    /*聲明動畫  關鍵幀  @keyframes 動畫名稱 {  }  */
    @keyframes move  {   
        from {
            left: 0;
            background-color: red;
        }

        to {
            left: 200px;
            background-color: yellow;     /* Safari 和 Chrome */
        }
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二、加載動畫

效果

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫截圖</title>
    <style type="text/css">
       .bian{
           width: 302px;
           height: 129px;
           margin: 100px auto;
           border: 1px solid black;
       }
        .zi{
            width: 69px;
            height: 17px;
            display: block;
            margin: 0 auto;
            margin-top: 104px;
        }

       .b1,.b2,.b3,.b4,.b5{
            float: left;
            width: 30px;
            height: 36px;
            margin-top: 32px;
            margin-left:29px;
            border-radius: 10px;

       }

        .b1{
            background-color: red;
            animation: dong 1s ease 1ms infinite;
        }
        .b2{

            background-color: green;
            animation: dong 1s ease 200ms infinite;
        }
        .b3{

            background-color: #ffc1cd;
            animation: dong 1s ease 400ms infinite;
        }
        .b4{

            background-color: greenyellow;
   
            animation: dong 1s ease 600ms infinite;
        }
        .b5{
     
            background-color: cyan;
            animation: dong 1s ease 800ms infinite;
        }
        @keyframes dong {

            from{
                height: 30px;/*本來 後來 進度 剛開始的什麼樣*/
            }
            to{
                transform: scale(1,2);/*縮放 前邊本來寬的倍數 後邊本來高的倍數 */
            }
        }
    </style>
</head>
<body>
    <div class="bian">
        <div class="b1"></div>
        <div class="b2"></div>
        <div class="b3"></div>
        <div class="b4"></div>
        <div class="b5"></div>
        <span class="zi">loading...</span>
    </div>
</body>
</html>

三、動畫 + 2D變形示例

效果

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 214px;
        height: 214px;
        margin: 100px auto;
        position: relative;
        
    }
    div img {
        /*永遠循環的勻速轉動  */
        animation: rotate  linear  2s infinite;   
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);   
        }
        to {
            transform: rotate(360deg); /*旋轉360度*/
        }
    }
    div p {
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 214px;
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>
    <div>
        <img src="images/web.png" alt="">
        <p> 轉轉</p>
    </div>
</body>
</html>

參考

一、w3school動畫

二、CSS3動畫

你若是願意有所做爲，就必須善始善終。(18)

相關標籤/搜索

android.support.v4.animation

每日一句

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