1分钟深入了解CSS3的动画属性animation

最新推荐文章于 2022-09-22 10:38:28 发布

桃花扇J

最新推荐文章于 2022-09-22 10:38:28 发布

阅读量573

点赞数 1

分类专栏： CSS3 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44584442/article/details/105448349

版权

CSS3 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

拖好久的animation…温馨提示，先看效果，代码附在讲解后

上篇说到@keyframe可以定义动画，animation就是将@keyframe所定义好的动画添加在元素身上。

animation可以传8个参数，常用的有6个，动画名称（@keyframe定义好的），执行时长，动画类型（默认ease），执行延时时常（默认0），动画循环次数（默认1），运动方向（默认normal）

对定义动画有问题移步@keyframe，执行和执行延时时长也木得问题，重点讲动画类型、动画循环次数、运动方向

1.动画类型

动画类型的属性值与transition相同，ease，linear，ease-in，ease-out，ease-in-out，cubic-bezier，step-start，step-end，steps(num,[ start | end ] )，除了step系列，其余在transition中和贝塞尔曲线中讲过CSS3过渡属性transition详解、贝塞尔曲线，那么就来康康step系列吧

（1）steps(num, start / end)

知识点1：num表示该动画的上一关键帧到下一关键帧分几步完成，步数越多动画越细腻，举个例子吧，图1为linear属性值的动画效果，图2为属性值为steps(1, end)的动画效果。

知识点2：end与start的区别。end表示保留当前帧状态，直到这一关键帧动画结束，忽略最后一帧的效果（由图1图2对照可知最后一帧绿色没有显示），配合使用forwards，可以看到最后一帧，如图3

start保留下一段帧状态，直到这段一关键帧动画结束，忽略第一帧的状态，如图4，没有显示第一帧的黄色，一般不常使用start

再举一个分4步执行一个关键帧的例子，如图5

（2）step-end与step-start

step-end相当于steps(1, end)，step-start相当于steps(1, start)

2.动画循环次数

可以填num / infinite，num表示确定循环多少次，infinite表示循环无数次

3.运动方向

可以填normal(默认)，reverse(反方向)，alternate(正方向->反方向->正方向)，alternate-reverse(反方向->正方向->反方向)，与infinite配合使用，举例alternate，如图6，其中小方块在左下角停留没有移动到左上角就是因为end忽略最后一帧的问题

以上所有例子代码如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes run {
            0% {
                left: 0;
                top: 0;
                background-color: #ffb;
            }

            25% {
                left: 100px;
                top: 0;
                background-color: #fbf;
            }

            50% {
                left: 100px;
                top: 100px;
                background-color: #bff;
            }

            75% {
                left: 0px;
                top: 100px;
                background-color: #fbb;
            }

            100% {
                left: 0px;
                top: 0px;
                background-color: #bfb;
            }
        }

        .wrapper {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        .demo {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #bbf;
        }

        .run {
            /* animation: run 4s linear infinite; */
            /* animation: run 4s steps(1,end); */
            /* animation: run 4s steps(4,end); */
            /* end + forwards */
            /* animation: run 4s steps(1,end) forwards; */
            /* animation: run 4s step-end; */
            /* animation: run 4s steps(1,start) alternate; */
            animation: run 4s steps(1,end) infinite alternate;
        }

        button {
            position: absolute;
            width: 50px;
            height: 25px;
            line-height: 25px;
            top: -26px;
            left: -1px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="demo"></div>
        <button>run</button>
    </div>

</body>
<script>
    var demo = document.getElementsByClassName('demo')[0];
    var runBtn = document.getElementsByTagName('button')[0];
    runBtn.onclick = function () {
        demo.classList += " run";
    }
</script>

</html>

我的承诺兑现啦，动画结束后，CSS3的内容剩transform了

但是暂时不打算更CSS3了，一方面博主已经学到bootstrap啦~~~，另一方面其实博主自己也没搞很明白呢，感觉讲不清楚，个人觉得虽然效果很炫酷吧，但是不是很常用的样子呀，所以拖一拖，以后再更吧

所以接下来直接更bootstrap了，加油啦！

桃花扇J

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
1分钟深入了解CSS3的动画属性animation

animation可以传8个参数，常用的有6个，动画名称（@keyframe定义好的），执行时长，动画类型（默认ease），执行延时时常（默认0），动画循环次数（默认1），运动方向（默认normal）
复制链接

扫一扫

专栏目录