前端css中animation的使用
一、前言
animation常伴随着[动画帧]@keyframes一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。
二、主要内容说明
animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如“animation:”+后面各属性的值，用空格隔开+“；”的形式设置动画效果。举例如：animation: box1 3s linear 2s infinite;，表示创建一个叫box1，持续时间3s，开始到结束的动画速度不变，延迟2s后再开始，不断重复的动画。各值要按排序要求设置好。
（一）、animation-name（名称）属性
animation-name用于定义动画的名称。当我们创建一个动画时，给他编辑一个名称方便管理些。如某个动画取名为n，要关键帧@keyframes配合运行这个n动画，则关键帧里需要指定索引这个名称n，最后关键帧就可以确定是要进行这个n动画了。当然不给@keyframes关键帧指定对象运行动画，他也不懂要运行啥。
（二）、animation-duration（持续时间）属性
duration为持续时间。那么animation-duration则为定义动画的持续时间的属性，通常以秒(s)或毫秒(ms)为单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation 动画效果</title>
<style>
/* 定义.box-max类的样式，设置盒子的尺寸和背景颜色 */
.box-max {
width: 100px; /* 盒子宽度 */
height: 100px; /* 盒子高度 */
background-color: aqua; /* 盒子背景颜色为水蓝色 */
animation-name: box1; /* 应用动画名称为box1 */
animation-duration: 3s; /* 动画持续时间为3秒 */
}
/* 定义名为box1的关键帧动画 */
@keyframes box1 {
0% {
opacity: 1; /* 动画开始时，盒子完全不透明 */
}
100% {
opacity: 0.3; /* 动画结束时，盒子透明度为0.3 */
}
}
</style>
</head>
<body>
<!-- 动画作用的元素，带有描述性文本 -->
<div class="box-max">
我是一个盒子，名称为box1，我会逐渐变透明。
</div>
</body>
</html>
（三）、animation-timing-function属性
iming（时序），function（函数）。animation-timing-function用于控制动画的速度曲线。动画有运行的时段，有些时段我们想让它快些，有些时段我们想让它慢性，此时可以根据需要自己设置好animation-timing-function的值便可，常用的值有
linear ------ 从头到尾，动画的运行速度相同。
ease ------ 默认值，开始低速，然后加快，结束前变慢。
ease-in ------ 低速开始，结束前不断变快。
ease-out ------ 快速开始，结束前不断变慢。
ease-in-out ------ 开始和结束时段是慢速，中间部分速度最快。
cubic-bezier(n,n,n,n) ------ 贝塞尔曲线，可以自己设置速度曲线
（四）、animation-delay（延迟）属性
delay（延迟）。顾名思义，animation-delay为延迟的时间，动画开始前的延迟时间。因为有时候我们不需要动画马上运行，需要延迟一定的时间后再开始。单位同样取秒(s)或毫秒(ms)。
后面的源码3小盒子在等待期间，它是显示的，不是透明的状态效果，需要等待2s后才开始进行动画由透明变为不透明，这里是属性animation-fill-mode的默认值none设置的作用。后面也会讲到这部分关于动画前、后的内容。
（五）、animation-iteration-count（反复计数）属性
iteration（反复），count（计数）。animation-iteration-count用于定义动画播放的次数。一段动画我们设置的时间若有限，想让动画多运行几次可以用此属性设置。取值的方式主要有以下几种。
整数 ------ 设置整数值，如1、2、3，当为3时表示动画重复运行3次。
小数 ------ 设置小数，如2.5，那么表示动画重复2次，第三次进行一半。
infinite ------ 取值infinite(无限的)则重复运行动画
（六）、animation-direction（方向）属性
direction(方向)，属性animation-direction用于设置动画的播放方式，是从头到尾正向播放，或是从尾到头的倒放。当我们设置关键帧，开始为0%，结束为100%的状态，正向为0%到100%的动画变换，反向倒放为100%到0%的动画变换。属性值主要有下面4个。
normal ------ 动画正放，动画一周期解释后重置到开始位置。
reverse ------- 动画倒放
alternate ------ 动画在奇数次正向播放，偶数次反向播放。如过一个动画是持续播放的，程序刚开始动画为第一次，这一次播放完毕便进行第二次，以此类推。当是奇数，如1,3,5···时，动画就正向播放；当是偶数，如2,4,6···时，动画就反向播放。
alternate-reverse ------ 与alternate属性相反，动画在奇数次反向播放，偶数次正向播放。
animation-fill-mode属性
animation-fill-mode主要用于定义动画前后的元素状态。主要属性值如下
none ------ 默认值，动画不会对元素在动画开始前或结束后形式参数产生任何影响。动画开始前，元素显示css非动画状态的形式；动画结束元素回到动画未运行前的初始状态。
forwards ------ 动画完成后，元素保持在动画的最后关键帧。就是动画运行到哪里，结束后它就保持在哪里，不会回初始点了。
backwards ------ 动画开始前，元素显示动画的第一个关键帧的样式。当我们设置一个盒子，进行的动画是刚开始开始是透明的，后面慢慢变得完全不透明。默认情况下，在等待运行前，盒子长啥样它就显示啥样，动画开始后才运行从透明变为不透明的状态，如源码3中的小盒子的属性，小盒子是延迟2s钟才开始运行动画，在这2s中的等待期盒子是显示盒子本身的具体样子，并不是以透明的状态进行等待。若要达到在动画运行前的等待期间为透明效果，就可以运用backwards的属性，在动画开始前的等待期，它显示的是第一关键帧的时候的样子，也就是透明的样子。
both ------ 结合了forwards和backwards的效果。动画开始前的等待期他是第一关键帧的样子，动画结束后保持在最后结束时的模样，也不会回到原点了。
（八）、animation-play-state（播放状态）属性
state（状态）。animation-play-state用于控制动画的播放状态。在动画过程中我们可以暂停动画，也可以暂停后继续运行。值主要有两个。即running和paused。当running时，动画正常播放。当paused时，动画则停在当前帧。
网友评论