CSS3-Animation学习总结：keyframe&Animation属性&动画重置技巧

最新推荐文章于 2024-05-13 14:34:46 发布

嘿嘿嘿灰灰

最新推荐文章于 2024-05-13 14:34:46 发布

阅读量2.4k

点赞数 3

文章标签： javascript css animation

本文链接：https://blog.csdn.net/X1432564581/article/details/105275119

版权

一、keyframe（关键帧）

CSS3中的动画，其实是通过改变每一帧中元素的样式来实现的。通过在动画序列中定义关键帧的样式可以控制CSS动画序列中的中间步骤。

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

上面的例子中大家可以看到，使用关键帧需先创建一个带名称的@keyframes规则，一个keyframes规则中可以有多个关键帧。例子中有两个关键帧from和to，分别对应这个动画的开始与结束。当然也可以通过使用百分比来定义关键帧，from代表的是0%，而to代表的是100%。

二、Animation属性

1、animation-delay

animation-delay 属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。可以简单地理解为经过多久时间开始执行这段动画。

animation-delay: 3s;

2、animation-direction

animation-direction 属性指示动画是否反向播放，它有四个属性：

（1）normal：每个动画循环内动画都是向前循环，循环结束后动画会回到一开始的位置。
（2）reverse：每个动画循环内动画都是反向循环，也就是说动画是从尾部执行到头部的。
（3）alternate：动画会从头部开始交替运行，也就是说动画会先从最开始的位置运行到最后的位置，再从最后的位置运行到最开始的位置，直到循环结束。
（4）alternate-reverse：动画会从尾部开始交替运行，也就是说动画会先从最后的位置运行到最开始的位置，再从最开始的位置运行到最后的位置，直到循环结束。

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse

3、animation-duration

animation-duration属性指定一个动画周期的时长，比方设置为1s说明这个动画会在1s内结束，当然也可以使用ms作为单位。

animation-duration: 6s
animation-duration: 120ms

4、animation-fill-mode

animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标，它有四个属性：

（1）none：这是默认值，表示动画未执行时不会将任何样式应用到目标元素上，而是采用该元素原先设定好的css来显示。
（2）forwards：目标保留执行期间最后一个关键帧的计算值，也就是说动画执行完成后会保留最后一帧的样式。
（3）backwards：动画将在应用于目标时立即应用第一个关键帧中定义的值，并在动画运行期间保留此值。也就是说在动画即将运行之前会立刻将第一帧的样式赋值给目标元素。
（4）both：动画同时应用forwards与backwards属性

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

5、animation-iteration-time

animation-iteration-time属性定义了动画在结束前运行的次数。
你可以设置为infinite，这个值是无限的意思，也就是说这个动画会一直运行下去。
也可以设置为数字，2的话代表这个动画会运行两次，0.5的话代表这个动画会执行到50%就结束。

animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.4;

6、animation-name

animation-name属性指定应用于目标属性的一系列动画，代表一个由@keyframes定义的动画序列。

7、animation-play-state

animation-play-state属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

animation-play-state: running;
animation-play-state: paused;

8、animation-timing-function

animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个。
在这里插入图片描述
这里推荐一篇关于cubic-bezier的博文，个人感觉挺好理解的：
贝塞尔曲线——cubic-bezier详解

三、重置动画小技巧

如果想让一个已经结束的动画重新执行，可以使用删除目标元素的动画效果，让文档重新计算样式保存该操作，然后再将动画效果加回该元素的方式来做到。下面是一个例子：

function play() {
  document.querySelector(".box").className = "box";
  window.requestAnimationFrame(function(time) {
    window.requestAnimationFrame(function(time) {
      document.querySelector(".box").className = "box changing";
    });
  });
}

我们先将该元素的类列表设置为不含动画效果的类名，这里是"box"，这个时候文档是还没有重新计算的，所以这个设置不会生效。
我们可以使用requestAnimationFrame函数来解决这个问题。requestAnimationFrame函数的回调会在下一次重绘页面之前执行，我们在requestAnimationFrame函数的回调中再加一个requestAnimationFrame函数的回调。这个时候整个程序的流程是这样子的：

1、先将目标元素的类列表设置为不含动画效果的类名。这个时候此操作还没生效。
2、遇到第一个requestAnimationFrame函数，发现它的回调函数中又调用了一次requestAnimationFrame函数。执行完第一个回调后文档被重新计算，第一步的操作生效。
3、执行第二个requestAnimationFrame函数中的回调，将目标元素类列表设置为包含动画效果的，这个时候此操作也还没生效。
4、回调执行完成后文档重新计算，这个时候第三步的操作生效，动画被重置。