CSS3 動畫

1. 動畫html

       動畫(animation)是CSS3中具備顛覆性的特徵之一,可經過設置多個節點來精確控制一個或一組動畫,經常使用來實現複雜的動畫效果。
相比較過渡,動畫能夠實現更多變化,更多控制,連續自動播放等效果。動畫

1.1 動畫的基本使用ui

 製做動畫分爲兩步:
  1.先定義動畫
  2.再使用(調用)動畫url

1. 用keyframes 定義動畫(相似定義類選擇器)spa

@keyframes 動畫名稱 {
   0%{
        width:100px;
   }  
   100%{
        width:200px;
   }
}

動畫序列code

  1>0% 是動畫的開始,100% 是動畫的完成。這樣的規則就是動畫序列。
  2>在 @keyframes 中規定某項 CSS 樣式,就能建立由當前樣式逐漸改成新樣式的動畫效果。
  3>動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。您能夠改變任意多的樣式任意多的次數。
  4>請用百分比來規定變化發生的時間,或用關鍵詞 "from" 和 "to",等同於 0% 和 100%。orm

2. 元素使用動畫htm

div {
       width: 200px;
       height: 200px;
       background-color: aqua;
       margin: 100px auto;
       /* 調用動畫 */
       animation-name: 動畫名稱;
       /* 持續時間 */
       animation-duration: 持續時間;
    }

1.2動畫經常使用屬性blog

 

 1.3 動畫簡寫屬性ci

  animation:動畫名稱 持續時間 運動曲線  什麼時候開始  播放次數  是否反方向  動畫起始或者結束的狀態;

  animation: myfirst 5s linear 2s infinite alternate;

  1>簡寫屬性裏面不包含 animation-play-state
  2>暫停動畫:animation-play-state:   puased;   常常和鼠標通過等其餘配合使用
  3>想要動畫走回來 ,而不是直接跳回來:animation-direction   :  alternate
  4>盒子動畫結束後,停在結束位置:  animation-fill-mode  :   forwards

案例:熱點圖案例

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .tb {
            top: 500px;
            right: 80px;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            /* 保證咱們小波紋在父盒子裏面水平垂直居中 放大以後就會中心向四周發散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  咱們不要用scale 由於他會讓 陰影變大*/
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

1.4 速度曲線細節

  animation-timing-function:規定動畫的速度曲線,默認是「ease」

  

相關文章
相關標籤/搜索