动画
#### 动画
#### 1、动画属性
```css
① animation-name 属性 表示动画名(名字任意起)
animation-name: <name>;
② animation-duration 属性 表示动画持续时间
animation-duration: <time>;
③ animation-delay 属性 表示动画延迟时间
animation-delay: <time>;
④ animation-timing-function 属性 表示动画运动曲线
animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：匀速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：贝赛尔曲线函数
⑤ animation-play-state 属性 表示动画状态
animation-play-state: running | paused
-- running：运行
-- paused：暂停
⑥ animation-fill-mode 属性 表示动画结束后的停留位置
animation-fill-mode: forwards | backwards
-- forwards:终点
-- backwards:起点
⑦ animation-iteration-count 属性 表示动画次数
animation-iteration-count: <count> | infinite
-- <count>：固定次数
-- infinite：无限次
⑧ animation-direction 属性 表示运动方向
animation-direction: normal | alternate | alternate-reverse;
-- normal：原起点为第一次运动的起点，且永远从起点向终点运动
-- alternate：原起点为第一次运动的起点，且来回运动
-- alternate-reverse：原终点变为第一次运动的起点，且来回运动
```
#### 2、动画体
```css
@keyframes <name>{
/*from未写任何属性设置时，默认全部取初始值（初始状态）*/
from{}
to{}
}
@keyframes <name>{
0% {}
...
100% {}
}
```
###### v_hint：动画属性设置给指定选择器标签，动画体在样式中单独设置
三 代码示范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
/*动画样式*/
.box {
/*绑定动画名*/
animation-name: wasai;
/*持续时间*/
animation-duration: 1s;
/*延迟时间*/
/*animation-delay: .1s;*/
/*动画结束停留位置:backwards起点 forwards终点*/
/*animation-fill-mode: forwards;*/
/*运动次数 infinite无数次*/
animation-iteration-count: 4;
/*多次运动方向的规则*/
/*alternate:来回*/
/*alternate-reverse:终点开始来回*/
/*animation-direction: alternate-reverse;*/quotes: ;
/*动画状态 running*/
/*animation-play-state: paused;*/
/*整体设置*/
animation: wasai 1s 2 linear alternate;
}
.box:hover {
animation-play-state: running;
}
/*动画体*/
@keyframes wasai{
0% {
}
100% {
width: 400px;
}
}
@keyframes wasai1{
0% {}
100% {}
}
@keyframes wasai2{
0% {}
100% {}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
