css动画--animation

794 阅读6分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情

最初在茫茫的编程世界中,就是网页和各种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>

1661000990766 00_00_00-00_00_30.gif

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