## animation 属性
animation属性是六个动画属性的速记属性：
* animation-name
* animation-duration
* animation-timing-function
* animation-delay
* animation-iteration-count
* animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
|默认值：|none 0 ease 0 1 normal|
| --- | --- |
|继承性：|no|
|JavaScript 语法：|object.style.animation="mymove 5s infinite"|
语法
~~~
animation: name duration timing-function delay iteration-count direction;
~~~
| 值 | 描述 |
| --- | --- |
| *[animation-name](https://www.w3cschool.cn/cssref/pr-animation-name.html "CSS3 animation-name 属性")* | 规定需要绑定到选择器的 keyframe 名称。。 |
| *[animation-duration](https://www.w3cschool.cn/cssref/pr-animation-duration.html "CSS3 animation-duration 属性")* | 规定完成动画所花费的时间，以秒或毫秒计。 |
| *[animation-timing-function](https://www.w3cschool.cn/cssref/pr-animation-timing-function.html "CSS3 animation-timing-function 属性")* | 规定动画的速度曲线。 |
| *[animation-delay](https://www.w3cschool.cn/cssref/pr-animation-delay.html "CSS3 animation-delay 属性")* | 规定在动画开始之前的延迟。 |
| *[animation-iteration-count](https://www.w3cschool.cn/cssref/pr-animation-iteration-count.html "CSS3 animation-iteration-count 属性")* | 规定动画应该播放的次数。 |
| *[animation-direction](https://www.w3cschool.cn/cssref/pr-animation-direction.html "CSS3 animation-direction 属性")* | 规定是否应该轮流反向播放动画。 |
实例
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>
<div></div>
</body>
</html>
```
## animation-delay 属性
animation-delay 属性定义动画什么时候开始。
animation-delay 值单位可以是秒（s）或毫秒（ms）。
**提示**:允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
JavaScript 语法:object object.style.animationDelay="2s"
* * *
语法
~~~
animation-delay: time;
~~~
| 值 | 描述 | 测试 |
| :-- | :-- | :-- |
| *time* | 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0 | [测试 »](https://www.w3cschool.cn/tryrun/showhtml/trycss3_animation-delay) |
实例
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-delay:2s;
/*Safari and Chrome*/
-webkit-animation:mymove 5s infinite;
-webkit-animation-delay:2s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong> animation-delay 属性不兼容Internet Explorer 9 以及更早版本的浏览器</p>
<div></div>
</body>
</html>
```
## animation-direction 属性
animation-direction：属性控制如何在`reverse`或`alternate`周期播放动画。
如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
注释：如果把动画设置为只播放一次，则该属性没有效果。
JavaScript 语法：object.style.animationDirection="alternate"
## 语法
~~~
animation-direction: normal|reverse|alternate|alternate-reverse;
~~~
normal以正常的方式播放动画
reverse以相反方向播放动画
alternate播放动画作为正常每奇数时间（1,3,5等）和反方向每偶数时间（2,4,6，等...）
alternate-reverse在每个奇数时间（1,3,5等）在相反方向上播放动画，并且在每个偶数时间（2,4,6等等）的正常方向上播放动画
## 实例
```
<!DOCTYPE html>
<html>
<head>
<title>W3Cschool(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。</p>
<div></div>
</body>
</html>
```
## animation-duration 属性
animation-duration：定义动画完成一个周期需要多少秒或毫秒。
JavaScript 语法:object object.style.animationDuration="3s"
## 语法
~~~
animation-duration: time;
~~~
time设置一个动画周期的时间间隔（以秒或毫秒为单位）。 默认值为0，表示不会有动画
* * *
## 实例
```
<html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove infinite;
animation-duration:2s;
/* Safari and Chrome */
-webkit-animation:mymove infinite;
-webkit-animation-duration:2s;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong> animation-duration属性不兼容 Internet Explorer 9 以及更早版本的浏览器.</p>
<div></div>
<p><b>注意:</b> 要指定动画属性。否则时间若是0,动画不会进行。</p>
</body>
</html>
```
## animation-fill-mode 属性
animation-fill-mode：设置样式以在动画不播放时应用元素。
注释：其属性值是由逗号分隔的一个或多个填充模式关键词。
JavaScript 语法：object.style.animationFillMode=none
语法
~~~
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
~~~
| 值 | 描述 |
| --- | --- |
| none | 默认值。无样式 |
| forwards | 动画结束后，使用元素的结束属性值。 |
| backwards | 使用元素的起始值。 |
| both | 动画将遵循向前和向后的规则。 |
## animation-name 属性
animation-name 属性为 @keyframes 动画规定名称。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
默认值：none继承性：no版本：CSS3JavaScript 语法：object.style.animationName="mymove"
##
* * *
语法
~~~
animation-name: keyframename|none;
~~~
| 值 | 描述 |
| --- | --- |
| *keyframename* | 规定需要绑定到选择器的 keyframe 的名称。 |
| none | 规定无动画效果（可用于覆盖来自级联的动画）。 |
## animation-play-state 属性
animation-play-state：设置是否运行或暂停动画。
注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。
JavaScript 语法：object.style.animationPlayState="paused"
## 语法
~~~
animation-play-state: paused|running;
~~~
| 值 | 描述 | 测试 |
| --- | --- | --- |
| paused | 动画已暂停。 | [测试](https://www.w3cschool.cn/tryrun/showhtml/css3_animation-play-pause) |
| running | 默认值， 动画正在运行。 | [测试](https://www.w3cschool.cn/tryrun/showhtml/css3_animation-play-running) |
## animation-timing-function 属性
animation-timing-function：指定动画速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。
JavaScript 语法:object object.style.animationTimingFunction="linear"
## 语法
~~~
animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n);
~~~
| 值 | 描述 | 测试 |
| --- | --- | --- |
| linear | 动画从开始到结束具有相同的速度。 | [测试](https://www.w3cschool.cn/statics/demosource/Playit/Playit2.html#linear) |
| ease | 动画有一个缓慢的开始，然后快，结束慢。 | [测试](https://www.w3cschool.cn/statics/demosource/Playit/Playit2.html#ease) |
| ease-in | 动画有一个缓慢的开始。 | [测试](https://www.w3cschool.cn/statics/demosource/Playit/Playit2.html#ease-in) |
| ease-out | 动画结束缓慢。 | [测试](https://www.w3cschool.cn/statics/demosource/Playit/Playit2.html#ease-out) |
| ease-in-out | 动画具有缓慢的开始和慢的结束。 | [测试](https://www.w3cschool.cn/statics/demosource/Playit/Playit2.html#ease-in-out) |
| cubic-bezier(*n*,*n*,*n*,*n*) | 在立方贝塞尔函数中定义速度函数。 可能的值是从0到1的数字值。 | |
**实例1--从开始到结束以相同的速度播放动画:**
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-timing-function:linear;
/* Safari and Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-timing-function:linear;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong> animation-timing-function 属性不兼容 Internet Explorer 9 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>
```
**为了更好地理解不同的定时函数值，这里提供了设置五个不同值的五个不同的 div 元素：**
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:50px;
background:red;
color:white;
font-weight:bold;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
#div1 {animation-timing-function:linear;}
#div2 {animation-timing-function:ease;}
#div3 {animation-timing-function:ease-in;}
#div4 {animation-timing-function:ease-out;}
#div5 {animation-timing-function:ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function:linear;}
#div2 {-webkit-animation-timing-function:ease;}
#div3 {-webkit-animation-timing-function:ease-in;}
#div4 {-webkit-animation-timing-function:ease-out;}
#div5 {-webkit-animation-timing-function:ease-in-out;}
@keyframes mymove
{
from {left:0px;}
to {left:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:300px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong> animation-timing-funtion属性不兼容 Internet Explorer 9以及更早版本的浏览器</p>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>
```
**与上例相同，但是通过 cubic-bezier 函数来定义速度曲线：**
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div
{
width:100px;
height:50px;
background:red;
color:white;
font-weight:bold;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
#div1 {animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
@keyframes mymove
{
from {left:0px;}
to {left:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:300px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong> animation-timing-function 属性不兼容 Internet Explorer 9 以及更早版本的浏览器.</p>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>
```
- CSS常用样式控制
- background--背景
- Text--文本
- CSS属性
- align-*
- animation-*
- appearance
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-source
- border-image-width
- Border-left
- border-left-color
- border-left-style
- border-left-width
- border-image-slice
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-shadow
- box-sizing
- caption-side
- clear
- clip
- color
- column-count
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- Empty-cells
- filter(滤镜)
- CSS 伪元素选择器
- :active 选择器
- :after 选择器
- :before 选择器
- :checked 选择器
- :disabled 选择器
- :empty 选择器
- :enabled 选择器
- :first-child 伪元素
- :first-letter 伪元素
- :first-line 伪元素
- :first-of-type 选择器
- :focus 选择器
- :hover 选择器