CSS3_動畫 animation

時間 2019-11-08

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

原文原文鏈接

在項目中，顏色，圖片，等等數據都保存在數組中javascript

動畫css

使元素從一種樣式逐漸變化到另外一種樣式的html

animation: name ;java

無順序要求，可是必須先寫持續時間 ，再寫 延遲時間數組

原理

人眼在看到畫面的0.34 秒內，畫面不會消失函數

在一幅畫面還沒消失以前，播放下一張畫面動畫

關鍵幀 @keyframes

           /* 動畫的名稱 */
@keyframes animationname {
    keyframes-selector {    /* （關鍵幀的選擇器，動畫持續時間的百分比，參照花費的總時間） 或者 （from 表明 0%，to 表明 100%%） */
        /* cssStyles; */
    }
}




/**** 實例 ****/
#box {
 width: 200px;
 height: 200px;
 background-color: olive;
 
 animation-name: yidong; /* 1. 動畫的名稱 */

 animation-duration: 10s; /* 2. 動畫持續時間 */
 
 animation-delay: 3s; /* 4. 動畫執行前等待的時間 */
 
 animation-fill-mode: both; /* 8. 設置動畫外的狀態 ，① 動畫執行前的狀態 backwards
 ② 動畫執行完之後的 to 狀態 forwards
 ③ 元素開始時與 from 狀態一致，結束與 to 狀態一致 both */
 
 /* 檢測的是關鍵幀的區間（0%-50%，50%-100%） */
 animation-timing-function: linear; /* 3. 設置動畫的類型
 （默認值 ease， 
 還有 linear，
 貝塞爾曲線cubic-bezier(0.07, 1.4, 0.86, 1.47)，
  1個區間跳2次 steps(2)） */
 animation-iteration-count: 2; /* 5. 動畫執行次數，無限次 infinite 或者 具體次數 */

 animation-direction: alternate; /* 6. 設置對象動畫運動方向，默認值正常 normal，
 相反方向，從結束向開始動畫 reverse，
 先正常運動，再反向運動____鐘擺動畫 alternate 需配合 infinite，
 先反向運動，再正常運動 alternate-reverse 需配合 infinite*/
  animation-play-state: running; /* 7. 設置對象狀態： 運行 running / 暫停 paused */
}

#box {
 animation-play-state: paused; /* 當鼠標懸浮時，動畫暫停 */
}

@keyframes yidong {
 0% { transform: translateX(0px); } /* 等同於 from {} */

 50% { transform: translateX(20px); }

 100% { transform: translateX(20px); } /* 等同於 to {} */
}

用來控制動畫變化的關鍵位置（而非全部位置）ui

編寫位置
幀函數編寫在控制元素樣式的外面
animation 的屬性 編寫在控制元素樣式裏面
- animation-name: yidong; /* 1. 動畫的名稱 */
- animation-duration: 10s; /* 2. 動畫持續時間 */
- animation-timing-function: linear; /* 3. 設置動畫的類型
  - - - ease 默認值
        
        linear
        
        cubic-bezier(0.07, 1.4, 0.86, 1.47) 貝塞爾曲線
        
        steps(2) 1個區間跳2次
- animation-delay: 3s; /* 4. 動畫執行前等待的時間 */
- animation-iteration-count: 2; /* 5. 動畫執行次數
  - - - infinite 無限次
        
        具體次數 */
- animation-direction: alternate; /* 6. 設置對象動畫運動方向
  - - - normal 默認值正常
      - reverse 相反方向，從結束向開始動畫
      - alternate 先正常運動，再反向運動____鐘擺動畫需配合 infinite
      - alternate-reverse 先反向運動，再正常運動需配合 infinite
- animation-play-state: running; /* 7. 設置對象狀態
  - - - running 運行
      - paused 暫停
- animation-fill-mode: both; /* 8. 設置動畫外的狀態
  - - - backwards 動畫執行前的狀態
      - forwards 動畫執行完之後的 to 狀態
      - both 元素開始時與 from 狀態一致，結束與 to 狀態一致

動畫執行完之後，馬上恢復原來狀態。

兔斯基動畫 （精靈圖 steps infinite）url

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Crazy Rabbit</title>

        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
                padding-top: 300px;
                padding-left: 300px;
            }
            
            /**** rabbit ****/
            #running_box {
                width: 48px;
                height: 48px;
                background: url("./img/rabbit.png") no-repeat;
                background-position: 0px 0px;
                
                animation: crazyRabbit 340ms steps(12) 0s infinite alternate;
            }
            @keyframes crazyRabbit {
                from {
                    background-position-x: 0px;
                }
                to {
                    background-position-x: -576px;
                }
            }
            #running_box:hover {
                animation: paused;
            }
        </style>
    </head>
    
    <body>
        
        <div id="running_box"> 
            
        </div>

    </body>
</html>

自行車動畫spa

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Running Bike</title>

        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
                padding: 300px 0 0 300px;
            }
            
            /**** Running Bike  ****/
            #bike_box {
                width: 130px;
                height: 130px;
                background: url("./img/bike.png") no-repeat;

                animation: bike 1s steps(32) infinite;
            }
            @keyframes bike {
                from {background-position: 0px 0px}
                to {background-position: 0px -4160px}
            }
            #bike_box:hover {
                animation: paused;
            }
        </style>
    </head>
    
    <body>
        
        <div id="bike_box"> 
            
        </div>

    </body>
</html>

開機動畫

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <meta name="viewport"
              content="user-scalable=no,
                       width=device-width,
                       initial-scale=1.0,
                       minimum-scale=1.0,
                       maximum-scale=1.0"/>
        
        <script type="text/javascript" src="./js/kjfFunctions.js"></script>
        
        <style rel="stylesheet" type="text/css">
            html, body, div, ul, li {
                margin: 0;
                padding: 0;
            }
            
            html, body {
                width: 100%;
                height: 100%;    /* 參照屏幕區域的高 */
                min-width: 600px;
                overflow: hidden;
            }
            
            #wrap {
                width: 100%;
                min-height: 100%;
                
                background: cadetblue;
            }
            
            #content {
                width: 100%;
                
                padding-bottom: 50px;
                
                font-size: 14px;
                background: darkgrey;
            }
            
            #footer {
                width: 100%;
                height: 50px;
                
                margin-top: -50px;
                
                background: chocolate;
                text-align: center;
                line-height: 50px;
            }
            
            #loading_animation {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                
                list-style: none;
                background-color: #bbb0;
            }
            
            #loading_animation li {
                float: left;
                
                margin-right: 10px;
                animation: jumpLetter 1s infinite alternate;
            }
            @keyframes jumpLetter {
                from {
                    transform: translateY(0px);
                }
                
                to {
                    transform: translateY(-15px);
                }
            }
        </style>
    </head>
    
    <body>
        
        <!-- 模擬屏幕區域 -->
        <div id="wrap">
            
            <!-- 內容區域 -->
            <div id="content">
                <ul id="loading_animation">
                    <li>L</li>
                    <li>o</li>
                    <li>a</li>
                    <li>d</li>
                    <li>i</li>
                    <li>n</li>
                    <li>g</li>
                </ul>
            </div>
        </div>
        
        <!-- 底部區域 -->
        <div id="footer">
        
        </div>
        
        <script type="text/javascript" src="./js/index.js"></script>
        <script type="text/javascript">
            var lis = document.querySelectorAll("#loading_animation li");
            
            var colorArr = ["red", "green", "blue"];
            var i = 0;
            for(i=0; i<lis.length; i++){
                lis[i].style.color = colorArr[i%3];
                
                lis[i].style.animationDelay = i*100+"ms";
            }
        </script>
    </body>
</html>

相關標籤/搜索

android.support.v4.animation

每日一句

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