CSS动画之animations

时间 2019-12-09

标签 css 动画 animations 栏目 CSS 繁體版

原文原文链接

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

1. 配置动画

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

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

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

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

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

ease学习

liner动画

ease-inspa

ease-outcode

ease-in-outorm

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>