css动画--animation

站长

2022年12月04日 16:26 · 阅读数 77

最初在茫茫的编程世界中，就是网页和各种UI的动画让我深深的入了迷，从此入了前端这条不归路qaq~

现在就来系统的记记css的animation吧！

定义动画

在css中定义动画是用的@keyframes name，name就是这个动画的名字。而定义动画的属性其实就是定义动画在某个帧的样式，然后让这个动画按着这个帧的顺序进行运动。那么如何定义顺序呢？就是使用% 或 from to:

@keyframes name {
    from {
        opacity:0;
        background-color:red;
    }
    to {
        opacity:1;
         background-color:orange;
    }
}

我们可以使用from to，其中from代表起始，to代表最终；我们也可以使用%:

@keyframes name {
    0% {
        opacity:0;
        background-color:red;
    }
    50% {
        opacity:1;
         background-color:orange;
    }
    100% {
        opacity:0;
         background-color:red;
    }
}

而from其实也可以理解为0%，to理解为100%,所以，这两个也可以一起使用。

我们要知道，0%不等于自身，100%也不等于自身，动画的顺序是：自身->0%->...->100%->自身。

使用动画

我们定义完动画后，就得使用这个才可以。所以我们得去需要使用这个动画的标签添加动画：

animation-name

添加动画我们可以使用animation-name，这样绑定这个动画的标签就可以使用这个动画了，而且添加动画可以添加多个，不仅仅只是添加一个动画。（添加多个动画时，要以逗号间隔）

animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

我们添加了动画名称之后，一定要设置animation-duration，因为它的默认是0，代表0s，也就是动画不会动。

我们如果只是想让动画有效果，只需要定义动画，然后给需要动画的标签添加动画名称，再设置动画时间就可以了。但是我们要注意，如果我们给标签添加多个动画的时候，如果我们的animation-duration少于名称的话，它会循环之前的。

比如：

div {
    width:200px;
    height:200px;
    background-color:red;
    animation-name:move,scale,radius;
    animation-duration:1s;
}

@keyframes move{
    from{
        transform:translateX(0)
    }
    to{
        transform:translateX(200px)
    }
}

@keyframes scale {
    from{
        transform:scale(1)
    }
    50% {
        transform:scale(.5)
    }
    to{
        transform:scale(1)
    }
}

@keyframes radius {
    from{
        border-radius:0;
    }
    to{
        border-radius:50%;
    }
}

如果我们只是给animation-duration设置一个值，1s，那么move、scale和radius动画的持续时间都是1s，如果我们给animation-duration设置两个值：1s、2s，那么move和radius的动画时间就是1s，而scale的动画时间就是2s，如果我们给animation-duration设置3个值：1s、2s、3s，那么move的动画时间就是1s，scale的动画时间是2s，radius的动画时间就是3s。

animation-delay

定义动画何时开始，值以秒或毫秒计。（就是这个动画要延迟多少秒才开始启动，这时候我们可以使用animation-fill-mode的backwords，让我们这个动画在延迟的时候以0%的时候的样式【最开始的那一帧，只能是0%或者from】）

然后如果我们有多个动画的话，它的设置和效果和animation-duration是一样的。

animation-timing-function

指定动画将如何完成一个周期。

他有两种方式：

速度曲线
帧

速度曲线

linear：平均速度，从头到尾速度是一样的
ease：默认值，动画从慢开始，逐渐变快，最后在结束前变慢
ease-in：动画从慢开始，逐渐变快
ease-out：动画从快开始，逐渐变慢
ease-in-out：动画从慢开始，中间快，再从慢结束
cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，也就是自定义速度。

帧

steps(number,start/end)：number代表把这个动画分为多少帧，start的意思是动画以一帧开始，也就是直接从0%开始，而end的意思是以0帧开始，也就是从初态开始，再进入第一帧（0%）。【就是start要比end快一帧】

他们的区别就是：速度曲线是动画是连续的，是一直动的，而分为step后，这个动画就是拆分为多少帧，那么这个动画就是不是连续的了，而是一步一步、一帧一帧的（就像翻书一样，一下翻一页）

start会丢失第一帧，end会丢失最后一帧，什么意思呢？就是start会丢失0%这一帧，直接开始下一帧；而end会丢失100%这一帧，在之前一帧就结束。

animation-iteration-count

规定动画应该播放的次数。它的值可以是具体的值（数字），代表要重复的次数，也可以是infinite，表示动画应该无限次播放（永久播放）。

animation-derection

代表动画从哪帧开始，哪帧结束。

normal：默认，从0%开始，到100%结束
reverse：从100%开始，到0%结束
alternate：从0%开始，0%结束
alternate-reverse：从100%开始，100%结束

注意： 如果动画被设置为只播放一次，alternate和alternate-reverse将不起作用。

animation-fill-mode

当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

none：默认值，动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards：动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both:动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

animation-play-state

指定动画是否正在运行或已暂停。

paused：暂停动画
running：运行动画

我们可以搭配伪类hover之类的，实现对动画的暂停或者播放。

下面我们以一个纯css的轮播图为例：

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100%;
            height: 100vh;
            background-color: antiquewhite;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .slide {
            width: 600px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }

        .slide:hover ul,
        .slide:hover ol::after{
            animation-play-state: paused;
        }
        ul {
            list-style: none;
            width: 2400px;
            height: 300px;
            display: flex;
            animation-name: slide;
            animation-duration: 4s;
            animation-timing-function: steps(4, end);
            animation-iteration-count: infinite;
        }

        ul li img {
            width: 600px;
            height: 100%;
        }

        ol {
            display: flex;
            width: 200px;
            height: 50px;
            justify-content: space-evenly;
            align-items: center;
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            z-index: 2;
        }
        ol::after {
            position: absolute;
            left: 16px;
            top: 10px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgba(238, 11, 11, 0.5);
            content: '';
            z-index: 1;
            animation-name: move;
            animation-duration: 4s;
            animation-timing-function: steps(4,end);
            animation-iteration-count: infinite;
        }
        ol li {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #ccc;
            color: #fff;
        }
        @keyframes slide {
            to {
                transform: translateX(-2400px);
            }
        }
        @keyframes move {
            to {
                transform: translateX(184px);
            }
        }
    </style>

<body>
    <div class="slide">
        <ul>
            <li><img src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                    alt=""></li>
            <li><img src="https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                    alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=747797291,1321739150&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                    alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=468539302,3909142183&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=676"
                    alt=""></li>
        </ul>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
</body>

css动画--animation

我们可以发现实现了自动轮播，当鼠标移到图片上，动画也暂停了，当鼠标移除后，动画又继续开始了...

转载自:https://juejin.cn/post/7133924375568318500