CSS动画之animations

最新推荐文章于 2022-07-12 22:11:15 发布

weixin_34310785

最新推荐文章于 2022-07-12 22:11:15 发布

阅读量399

点赞数

原文链接：https://segmentfault.com/a/1190000014001355

版权

CSS Animations 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。CSS动画功能是非常强大的，并且效率也比较高，如果能用CSS解决的动画那么我们最好不用JS动画来完成。
CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

1. 配置动画

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，animation的子属性有：

animation-delay
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。默认为0s,可以为负数，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。取值可以为ms/s

animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

- normal    默认值，每个动画循环结束，动画重置到起点重新开始
- alternate 动画交替反向运行
- reverse 反向运行动画，每周期结束动画由尾到头运行。
- alternate-reverse 反向交替， 反向开始交替

animation-duration
完成一次完整动画需要的时间。默认值为0s。取值可以为ms/s
animation-iteration-count
动画需要迭代的次数。
- infinite 无限
- 数字
animation-name
指定keyframes定义的动画帧，可以为多个值，不同值使用逗号分隔
animation-play-state
指定动画是运行或者暂停。
- running
- paused
animation-timing-function
动画运动函数

ease

liner

ease-in

ease-out

ease-in-out

animation-fill-mode

animation-fill-mode它能够控制元素在动画执行前与动画完成后的样式。一个带有延迟(animation-delay)，并且按正常方向（animation-direction）执行的动画（正常方向是指normal也就是指动画从0%运行到100%的动画）。动画按执行时间来划分，它分为三个过程，或者说一次动画过程可以将元素划分为三个状态：动画等待、动画进行和动画结束。默认情况之下，只有在动画进行状态，才会应用@keyframes所声明的动画；而在动画等待和动画结束状态，对元素样式并不会产生任何的影响。

none 默认值，动画执行前后不改变任何样式
forwards 动画结束后，元素的样式将设置为动画的最后一帧的样式
backwards 在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式
both 动画将会执行 forwards 和 backwards 执行的动作

速写 animation

.example { 
    animation: myAnim 2s 500ms 2 normal ease-in forwards; 
    }
扩展后
.example {
     animation-name: myAnim; 
     animation-duration: 2s; 
     animation-delay: 500ms; 
     animation-iteration-count: 2; 
     animation-direction: normal; 
     animation-timing-function: ease-in; 
     animation-fill-mode: forwards;
      }

2. 定义动画帧

2.1 介绍

@keyframes 让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。

要使用关键帧, 先创建一个带名称的@keyframes规则，以便后续使用 animation-name 这个属性来调用指定的@keyframes. 每个@keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

为了让一个关键帧列表有效，它必须至少包含了对0%（或from）和100%（或to）即动画的开头帧和结束帧的定义。如果都没有进行定义，那么整个@keyframes 是无效的，不能使用。

2.2 语法

@keyframes <identifier> {
[ [ from | to | <百分比> ] [, from | to | <百分比> ] block ]
}

<identifier>
帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。
from
等效于 0%.
to
等效于 100%.
<percentage>
动画序列中，触发关键帧的时间点，使用百分值来表示。

2.3 animate.css库的调用

学习完动画语法后，可能有些同学比较疑惑，我如何写出漂亮的动画呢，其实这个我觉得和技术关系不是很大了，更多的是用户体验和美学。所以专业的事情应该由更专业的人来完成。在开源社区有一个animate.css的库。我们可以直接调用。如果想让某个元素实现动画特效，只需要添加一个样式即可。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
    <title>动画</title>
</head>
<body>
    <div class="animated bounce">hello</div>
</body>
</html>