CSS动画效果（animation属性）解析
动画与变形和过渡的区别
在CSS3中，过渡和变形只能设置元素的变换过程，并不能对过程中的某一环节进行精确控制，例如过渡和变形实现的动态效果不能够重复播放。为了实现更加丰富的动画效果，CSS3提供了animation属性，使用animation属性可以定义复杂的动画效果。
@keyframes
在CSS3中，@keyframes规则用于创建动画。
基本语法格式:@keyframes animationname { keyframes-selector{css-styles;} }
animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。
css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。
animation-name属性
animation-name属性用于定义要应用的动画名称。
基本语法格式：
animation-name: keyframename | none;
animation-name 属性初始值为none，适用于所有块元素和行内元素。keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画。
animation-duration属性
animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计。
基本语法格式：
animation-duration: time;
animation-duration 属性初始值为0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。
animation-timing-function属性
animation-timing-function用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。
基本语法格式：
animation-timing-function:value;
animation-timing-function包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值。
animation-timing-function的常用属性值如下：
| 属性值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在cubic-bezier函数中自己的值。可能的值是从0到1的数值。 |
animation-delay属性
animation-delay属性用于定义执行动画效果之前延迟的时间，即规定动画什么时候开始。
基本语法格式：
animation-delay:time;
参数time用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0。animation-delay属性适用于所有的块元素和行内元素。
animation-iteration-count属性
animation-iteration-count属性用于定义动画的播放次数
基本语法格式：
animation-iteration-count: number | infinite;
animation-iteration-count属性初始值为1，适用于所有的块元素和行内元素。如果属性值为number，则用于定义播放动画的次数；如果是infinite，则指定动画循环播放。
animation-direction属性
animation-direction属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。
基本语法格式：
animation-direction: normal | alternate;
animation-direction 属性初始值为normal，适用于所有的块元素和行内元素。该属性包括两个值，默认值normal表示动画每次都会正常显示。如果属性值是“alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等）逆向播放。
animation属性
animation属性也是一个简写属性，用于综合设置以上六个动画属性。（用空格隔开）
基本语法格式：
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，并且永远不会播放动画。
基础练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@keyframes moveAndchange {
0%{
left: 0px;
top: 0px;
}
25%{
left: 200px;
top: 200px;
background: orange;
border-radius: 0;
}
50%{
left: 400px;
top: 200px;
background: orangered;
border-radius: 50%;
}
75%{
left:400px;
top: 0px;
background: palegreen;
border-radius: 0px;
}
100%{
left: 0px;
top: 0px;
background: aliceblue;
border-radius: 50%;
}
}
div{
width: 200px;
height: 200px;
margin: 200px;
position: absolute;
background: aqua;
border-radius: 50%;
animation: moveAndchange 10s;
animation-timing-function: ease-out;
animation-delay :2s;
animation-timing-function: 2;
}
</style>
<body>
<div></div>
</body>
</html>
总结
1、keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
2、在一个“@keyframes”中的样式规则可以由多个百分比构成的。
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
3、用cubic-bezier设置动画的速度曲线，它是由曲线的斜率决定速度的快慢。