CSS3——animation中的属性--steps

steps

点击查看steps小demo

配合animation来使用的（跳转动画）如果添加了这个stpe就添加不了cubic-bezier

我们先来看一下没设置steps前的animation是什么样子的，我们看到现在过渡动画是很流畅的，也是渐渐过渡到下一个颜色的

我们再来看一下设置了steps的样子。

括号里面的值是可以变动的，现在我们填入1，他是在0%这段动画里面，以跳转的形式一步过渡完一个颜色，填入2就是分成两步过渡完

我们试试填入2，它是一次分成两步过渡的，可以看到会出现过渡的颜色有点不同。

填的数越大，拆分的动画也就越细腻，我们来看看填入10，但是不管填多少，它都是跳转动画

还有后面的end是什么意思呢？后面其实是可以填两个值的

end还有发start

细心的同学可能会发现，当我们使用（1，end）的时候会发现看不到最后的黄色

那我们就换成start来看看什么样，是可以看到最后的黄色的。但是换成start，开始就看不到0%的红色，直接显示25%的绿色

end和start的区别，总结两句话

end：保留当前帧状态，直到这段动画时间结束

可以添加在后面添加forwards（保留时的100%状态），就可以看到了

里面的start写错了，是end的

start：保留下一帧状态，直到这段动画时间结束

我们来做个对比看看

end：保留当前帧状态，直到这段动画时间结束

(保留当前帧，我们可以看到第一帧在，最后一帧不在)

start：保留下一帧状态，直到这段动画时间结束

（保留下一帧，我们可以看到第一帧不在，最后一帧在）

给end添加foewards（保留最后一帧状态）

我们来写几个小demo

打字效果：

<!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>
        *{
            margin:0;
            padding:0;
        }
        @keyframes run {
            0%{
                left: 74px;
            }
            10%{
                left: 90px;
            }
            20%{
                left: 107px;
            }
            30%{
                left: 123px;
            }
            40%{
                left: 141px;
            }
            50%{
                left: 158px;
            }
            60%{
                left:175px;
            }
            70%{
                left:192px;
            }
            80%{
                left:209px;
            }
            90%{
                left:226px;
            }
            100%{
                left:74px;
            }
        }
        .wrapper{
            width:300px;
            height: 50px;
        }
        .wrapper .text{
            text-align: center;
            line-height: 50px;
            letter-spacing: 1px;
        }
        .wrapper .baffle{
            width:155px;
            height:20px;
            background-color:white;
            position: absolute;
            top: 17px;
            animation: run 10s steps(1, end) infinite; 

        }
        .baffle::after{
            content: "";
            width: 2px;
            height: 20px;
            background-color: #000;
            position: absolute;
            left: 0px;
            top: -1px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="text">屏幕前的你真的很帅</div>
        <div class="baffle"></div>
    </div>
</body>
</html>

钟表效果：

    <!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>
            *{
                margin:0;
                padding:0;
            }
            @keyframes second{
                0%{
                    transform: rotate(180deg);
                }
                100%{
                    transform: rotate(540deg);
                }
            }
            @keyframes minute{
                0%{
                    transform: rotate(90deg);
                }
                100%{
                    transform: rotate(450deg);
                }
            }
            .wrapper{
                margin:100px auto;
                width:512px;
                height: 512px;
                background-image:url('../ing/clock.png');
                position: relative;
            }
            .wrapper .hour{
                position: absolute;
                top: 240px;
                left: 238px;
                transform: rotate(180deg);
                transform-origin: center 16px;
            }
            .wrapper .minute{
                position:absolute;
                top: 240px;
                left: 239px;
                transform: rotate(90deg);
                transform-origin: center 16px;
                animation: minute 3600s steps(60, end) infinite;
            }
            .wrapper .second{
                position:absolute;
                top: 180px;
                left: 248px;
                transform: rotate(180deg);
                transform-origin: center 76px;
                animation: second 60s steps(60, end) infinite;
            }
        
        </style>
    </head>
    <body>
        <div class="wrapper">
            <img class="hour" src="../ing/hour.png" alt="">
            <img class="minute" src="../ing/minute.png" alt="">
            <img class="second" src="../ing/second.png" alt="">
        </div>
    </body>
    </html>

跑马效果：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

　　margin:0;

　　padding:0;

}

@keyframes run {

0%{

　　left: 0;

}

100%{

　　left:-2400px;

}

.wrapper{

　　width:200px;

　　height:100px;

　　margin: 200px auto;

　　position: relative;

　　overflow: hidden;

}

.wrapper .horse{

　　position: absolute;

　　top: 0;

　　animation: run 1s steps(12, end) infinite;

}

</style>

</head>

<body>

</div>

</body>

</html>

CSS3——animation中的属性--steps

猜你喜欢