CSS3_动画 animation

时间 2019-11-08 标签 css3 css 动画 animation

在项目中，颜色，图片，等等数据都保存在数组中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>