CSS动画（animation）
通过之前的学习我们知道，利用 transition 属性可以实现简单的过渡动画，但过渡动画仅能指定开始和结束两个状态，整个过程都是由特定的函数来控制的，不是很灵活。本节我们再来介绍一种更为复杂的动画 —— animation。
动画（animation）：和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才可以触发，而动画效果则可以自动触发动态效果。设置动画效果必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤。关键帧设置的格式如下：
<style>
/* 定义动画关键帧，关键帧的名字为test */
@keyframes test{
/* from表示动画的开始位置，也可以使用0%来表示。 */
from{
margin-left: 0;
}
/* to表示动画的结束位置，也可以使用100%来表示。 */
to{
margin-left: 100%;
}
}
</style>CSS 中的动画类似于 flash 中的逐帧动画，表现细腻并且非常灵活，使用 CSS 中的动画可以取代许多网页中的动态图像、Flash 动画或者 JavaScript 实现的特殊效果。
动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数（很官方的回答）。
CSS3animation（动画）属性。
@keyframes
通过 @keyframes 规则，我们可以创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，我们应该始终定义 0% 和 100% 选择器。这里面0%就是一帧，50%是一帧，100%也是一帧。
最后，请使用动画属性来控制动画的外观，同时将动画与选择器绑定
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性
举个例子：
@keyframes name
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}1. animation-name属性：设置需要绑定到元素的动画名称。
animation-name 属性用来将动画绑定到指定的 HTML 元素，属性的可选值如下：
| 值 | 描述 |
| keyframename | 要绑定到 HTML 元素的动画名称，可以同时绑定多个动画，动画名称之间使用逗号进行分隔 |
| none | 表示无动画效果， |
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes ball {
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 350px;}
50% { top: 200px; left: 350px;}
75% { top: 200px; left: 0px;}
100% { top: 0px; left: 0px;}
}
div {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid black;
position: relative;
animation-name: ball;
}
</style>
</head>
<body>
<div></div>
</body>
</html>运行结果：
注意：要想让动画成功播放，您还需要定义 animation-duration 属性，否则会因为 animation-duration 属性的默认值为 0，导致动画并不会播放。
2. animation-duration属性：定义动画完成一个周期需要多少秒或毫秒。
● time：指定动画播放完成花费的时间。默认值为 0， 意味着没有动画效果。
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes ball {
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 350px;}
50% { top: 200px; left: 350px;}
75% { top: 200px; left: 0px;}
100% { top: 0px; left: 0px;}
}
div {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid black;
position: relative;
animation-name: ball;
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>3. animation-timing-function：使用的数学函数，称为三次贝塞尔曲线、速度曲线。使用此函数，你可以使用自己的值，或使用预先定义的值之一。
● linear：动画从头到尾的速度是相同的；
● ease：默认。动画从低开始，然后加快，在结束之前变慢；
● ease-in：动画以低速开始；
● ease-out：动画以低速结束；
● ease-in-out：动画以低速开始和结束；
● cubic-bezier（n,n,n,n）：使用 cubic-bezier() 函数来定义动画的播放速度，参数的取值范围为 0 到 1 之间的数值。
4. animation-delay属性：定义动画什么时候开始。
● time：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0。
注意：单位可以说秒（s）或毫秒（ms）。
5. animation-iteration-count属性：定义动画应该播放多少次。
属性的可选值如下：
| 值 | 描述 |
| n | 使用具体数值定义动画播放的次数，默认值为 1 |
| infinite | 表示动画无限次播放 |
6. animation-direction属性：定义是否循环交替反向播放动画。
● normal：默认值。动画正常播放；
● reverse：动画反向播放；
● alternate：动画在奇数次（1、2、5…）正向播放，在偶数次（2、4、6…）反向播放；
● alternate-reverse：动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
7. animation-fill-mode 属性：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
注意：默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
● none 默认值。：动画在动画执行之前和之后不会应用任何样式到目标元素；
● forwards：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值；
● backwards ：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）；
● both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
8. animation-play-state：指定动画是否正在运行或已暂停。
● paused：指定暂停动画；
● running：指定正在运行的动画。
9. initial：设置属性为其默认值。
● initial：关键字用于设置 CSS 属性为它的默认值；
● initial：关键字可用于任何 HTML 元素上的任何 CSS 属性。
10. inherit：从父元素继承属性。
● inherit：关键字指定一个属性应从父元素继承它的值；
● inherit：关键字可用于任何 HTML 元素上的任何 CSS 属性。
animation
animation 属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 几个属性的简写形式，通过 animation 属性可以同时定义上述的多个属性，语法格式如下：
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
其中每个参数分别对应上面介绍的各个属性，如果省略其中的某个或多个值，则将使用该属性对应的默认值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.box1{
width: 700px;
height: 500px;
background-color: silver;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
margin-left: 10px;
/* animation-name: test; */
/* animation-duration: 4s; */
/* animation-timing-function: linear; */
/* animation-iteration-count: 4; */
/* animation-direction: alternate; */
/* animation-fill-mode: backwards; */
/* animation-delay: 2s; */
animation: test 2s linear 1s 4 alternate;
}
/* 定义动画关键帧，关键帧的名字为test */
@keyframes test{
/* from表示动画的开始位置，也可以使用0%来表示。 */
from{
margin-left: 50px;
background-color: orange;
}
/* to表示动画的结束位置，也可以使用100%来表示。 */
to{
margin-left: 600px;
background-color: yellow;
}
}
/* 控制动画的运行 */
/* .box1:hover .box2{
animation-play-state: paused;
} */
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>本文固定URL：https://www.dotcpp.com/course/1169