css3动画

2021-04-13 22:26

阅读：521

标签：har min tag 简写 nbsp info 效果图延迟控制

css3动画

1：定义

　　css3动画是使元素从一种样式自动变化为另一种样式的效果。在这个过程中你可以使用任意多的样式和任意多的次数。使用时用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，from代表0% 是动画的开始，to代表100% 是动画的完成。为了动画看起来具有连贯性，一般用百分比精确控制发生变化的时间点。

2：属性用法

　　Animation是一个简写属性，包含以下内容：

1、Animation-name 调用关键帧（必须存在）

2、Animation-duration 设置完成时间（必须存在）

3、Animation-timing-function 动画的速度曲线（默认是ease 动画以低速开始，然后加快，在结束前变慢）

4、Animation –delay 延迟（默认是0s）

5、Animation-iteration-count 动画应该播放的次数（默认是1次就结束，infinite是无限次数）

6、Animation-direction 规定动画的运动方向（默认正方向 reverse：反方向运行，alternate：动画先正常运行再反方向运行然后交替运行，alternate-reverse：动画先反运行再正方向运行，并持续交替运行。）

　　简写形式：

　　　　Animation: name duration timing-function delay iteration count direction 。

3：关键帧的制定

　　想要让一个元素完成动画的效果，animation属性还必须调用关键帧　

 　　　　@keyframes 关键帧的名称{
            0%{
                //开始状态
            }
            25%{

            }
            50%{

            }
            ......
            100%{
                //结束状态
            }
        }
　　　　也可以这么写 
　　　　　　@keyframes 关键帧的名字
　　　　　　　{
　　　　　　　　from{}//开始状态
　　　　　　　　to{}//结束状态
　　　　　　　　}

4：实例

　　DOCTYPE html>
　　html lang="en">

　　head>
    　　meta charset="UTF-8">
    　　title>开关title>
    　　style>
        　　.b1 {
            　　width: 200px;
            　　height: 100px;
            　　background-color: gray;
            　　border-radius: 50px;
            　　transition: 1s;
            　　position: relative;
        　　}

        　　.b2 {
            　　position: absolute;
            　　left: 0;
            　　top: 0;
            　　width: 100px;
            　　height: 100px;
            　　border-radius: 50px;
            　　background-color: blue;
            　　animation: move 0.7s infinite linear alternate;
        　　}

        @keyframes move {
            0% {
                left: 0;
                background-color: rgb（6,80,80）;
            }

            25% {
                left: 25px;
                background-color: rgb(23, 35, 143);
            }

            50% {
                left: 50px;
                background-color: darkblue;
            }

            75% {
                left: 75px;
                background-color: rgb(2, 2, 44);
            }

            100% {
                left: 100px;
                background-color: rgb(41, 4, 71);
            }
 　       }
 　　   style>
　　head>

　　body>
 　　   div class="b1">
 　　       div class="b2">div>
   　　 div>
　　body>

　　html>

　　运行结果如下：

　　技术图片

5:逐帧动画

　　逐帧动画其实就是利用animation-timing-function属性的属性值来控制相邻两个状态之间不进行过渡直接跳转到下一个状态，这时因为人眼的视觉停留效果就会造成很多有趣的现象比如人物跑步。

　　实例　　　

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
    style>
        *{
            margin:0;
            padding:0;
        }
        h3{
            width:180px;
            height:300px;
            background:pink url(./images/bg.png) no-repeat;
            margin:50px auto;
            /* 调用关键帧 */
            animation:bgMove .5s step-start infinite;
        }
        @keyframes bgMove{
            0%{
                background-position:0 0;
            }
            14%{
                background-position:-180px 0;
            }
            28%{
                background-position:-360px 0;
            }
            42%{
                background-position:-540px 0;
            }
            56%{
                background-position:-720px 0;
            }
            70%{
                background-position:-900px 0;
            }
            84%{
                background-position:-1080px 0
            }
            100%{
                background-position:0 0;
            }
        }
    style>
body>
    h3>h3>
body>
html>