欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3动画animation相关属性与关键帧规则keyframes的详细介绍

程序员文章站 2022-05-06 09:50:39
...

我昨天写三维正方体的时候,就用到了动画的语法

今天就来系统复习一下
过渡transition有着它的局限性
虽然简单,但是它只能在两个状态之间改变
并且它需要事件驱动才能够进行
不能够自己运动
所以为了解决这样的问题
我们需要animation动画

动画

若想实现动画效果
仅仅有animation属性是不够的
我们还需要@keyframes规则
先来看一个例子

p class="demo"></p>
.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 2s linear;}@keyframes change {
    0% {        background-color: red;    }
    50% {        background-color: purple;    }
    100% {        background-color: lime;    }}

当鼠标悬浮时,元素先变红然后过渡到紫色有过渡到绿色
CSS3动画animation相关属性与关键帧规则keyframes的详细介绍

我们先来看看@keyframes 规则

keyframes

在@keyframes中,我们定义动画关键帧
然后animation会按照keyframes关键帧里我们指定的帧状态进行过渡执行
0% - 100% 就代表动画的时间过渡
规则中的0%和100%,
可以替换成from和to关键字

@keyframes xxx {    from {        ......
    }
    to {
        ......
    }
}

如果我们省略了起始帧,浏览器会按照它最初的样式进行过渡

@keyframes change {
    100% {        background-color: lime;    }}

CSS3动画animation相关属性与关键帧规则keyframes的详细介绍


除此之外,我们还可以把相同的帧写在一起像这样

@keyframes change {    from,to {        background-color: red;    }
    50% {        background-color: blue;    }}

animation

animation是一个复合属性,有以下子属性

  • animation-name
    指定keyframes动画的名称

  • animation-duration
    指定动画执行时间

  • animation-timing-function
    指定动画的速度曲线,默认“ease”缓动

  • animation-delay
    指定动画延迟时间,默认“0”无延迟

  • animation-iteration-count
    指定动画播放的次数,默认“1”执行1次

  • animation-direction
    规定动画执行方向,默认“normal”

这个复合属性比我们的transition要复杂一些
前四个属性就不多解释了,类似于我们的transition
忘了的同学,戳这里->传送门

animation-iteration-count动画播放次数我们除了填写数字之外
还可以使用一个常用的关键字infinite无限循环

animation-direction除了normal以外还有如下属性值

  • reverse
    反向播放动画

  • alternate
    轮流播放动画

  • alternate-reverse
    反向轮流播放动画

通过一个例子来解释

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 1s 2 linear;}@keyframes change {    to {        width: 200px;    }}

默认normal
CSS3动画animation相关属性与关键帧规则keyframes的详细介绍
两次测试动画:
100px -> 200px
100px -> 200px


.demo:hover {    animation: change 1s 2 linear reverse; /*改*/}

reverse
CSS3动画animation相关属性与关键帧规则keyframes的详细介绍
两次测试动画:
200px -> 100px
200px -> 100px


.demo:hover {    animation: change 1s 2 linear alternate; /*改*/}

alternate
CSS3动画animation相关属性与关键帧规则keyframes的详细介绍
两次测试动画:
100px -> 200px
200px -> 100px


.demo:hover {    animation: change 1s 2 linear alternate-reverse; /*改*/}

alternate-reverse
CSS3动画animation相关属性与关键帧规则keyframes的详细介绍
两次测试动画:
200px -> 100px
100px -> 200px

animation-fill-mode

下面我要讲的两个属性都不是animation的子属性
所以不能写在animation中

animation-fill-mode规定对象动画时间之外的状态,默认“none”
除了none以外还有如下属性值

  • forwards
    动画完成后,保持最后一个属性(定义在最后一帧)

  • backwards
    在animation-delay指定时间内、动画显示之前,应用起始属性(定义在第一帧)

  • both
    应用forwards和backwards两种模式


forwards
这个属性还是蛮有用的
还是我们上面的例子

.demo:hover {    animation: change 1s linear; /*改*/
    animation-fill-mode: forwards; /*改*/}

CSS3动画animation相关属性与关键帧规则keyframes的详细介绍
我们发现1s之后,元素并没有回到最初的100px,而是保持了我们最后一帧的200px状态


backwards
理解这个属性,我们需要先加一个延时

.demo:hover {    animation: change 1s linear 1s; /*改*/
    /*animation-fill-mode: backwards;*/ /*待增*/}@keyframes change {    from {  /*增*/
        width: 150px;    }
    to {        width: 200px;    }}

我就不配图了
我们发现鼠标悬浮后,1s后瞬间变为150px,然后再过渡到200px
hover-0s -> 1s -> 2s
100px ->瞬变150px –> 过渡到200px

现在增加backwards

.demo:hover {    animation: change 1s linear 1s; /*改*/
    animation-fill-mode: backwards; /*增*/}

这回我们发现鼠标悬浮的一瞬间就变为15px,然后1s后过渡到200px
hover-0s -> 1s -> 2s
瞬变150px ->150px –> 过渡到200px
这就是backwards的作用,延迟前就应用第一帧动画的样式,然后准备过渡

animation-play-state

animation-play-state 指定动画的运行或暂停。默认 “running”
除了running还有paused
利用这个属性再配合js我们可以控制动画的暂停和运行

demo.style.animationPlayState = "paused";

今天的动画就先写这么多,感觉写了很长时间
日后再总结动画相关的性能问题

以上就是CSS3动画animation相关属性与关键帧规则keyframes的详细介绍的详细内容,更多请关注其它相关文章!