作用：
css3动画属性
语法:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
默认：none 0 ease 0 1 normal
搭配 @keyframes animation-name{}使用
- animation-name，规定需要绑定到选择器的 keyframe 名称
- animation-duration，规定完成动画所花费的时间，以秒或毫秒计
- animation-timing-function，规定动画的速度曲线
- animation-delay：规定在动画开始之前的延迟
- animation-iteration-count，规定动画应该播放的次数
- animation-direction，规定是否应该轮流反向播放动画
实例：动画与设定完成时间
语法 :
animation-name: keyframename | none;
animation-duration: time;
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* 动画名称 */
animation-name: mymove;
/* 动画完成时间 */
animation-duration: 5s;
}
@keyframes mymove {
from { left: 0; }
to { left: 200px; }
}
</style>
<body>
<h1>实现动画与设定完成时间<h1>
<div></div>
</body>
实例：动画开始时间（延迟开始时间）
语法 :
animation-delay: time;注意：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画周期
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* 动画名称 */
animation-name: mymove;
/* 动画完成时间 */
animation-duration: 5s;
/* 动画开始时间 */
animation-delay: 2s;
}
@keyframes mymove {
from { left: 0; }
to { left: 200px; }
}
</style>
<body>
<h1>实现动画开始时间（延迟开始时间）<h1>
<div></div>
</body>实例：动画播放次数
语法 :
animation-iteration-count: n | infinite;
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* 动画名称 */
animation-name: mymove;
/* 动画完成时间 */
animation-duration: 5s;
/* 动画播放次数 */
animation-iteration-count: 2;
}
@keyframes mymove {
from { left: 0; }
to { left: 200px; }
}
</style>
<body>
<h1>实现动画播放次数<h1>
<div></div>
</body>实例：动画播放速度
语法 :
animation-timing-function: value;
- ease，动画以低速开始，然后加快，在结束前变慢（默认）
- linear，动画从头到尾的速度是相同的
- ease-in，以低速开始
- ease-out，以低速结束
- ease-in-out，以低速开始和结束
- cubic-bezier(n,n,n,n), n = 0 ~ 1（值越小越快）
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* 动画名称 */
animation-name: mymove;
/* 动画完成时间 */
animation-duration: 5s;
/* 动画播放次数 */
animation-iteration-count: 2;
/* 动画播放速度 */
animation-timing-function: ease;
}
@keyframes mymove {
from { left: 0; }
to { left: 200px; }
}
</style>
<body>
<h1>实现动画播放速度<h1>
<div></div>
</body>实例：动画循环交替播放
语法 :
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
- normal，动画按正常播放（默认）
- reverse，动画反向播放
- alternate，动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放，即正向开始循环播放
- alternate-reverse，动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放，即反向开始循环播放
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* 动画名称 */
animation-name: mymove;
/* 动画完成时间 */
animation-duration: 5s;
/* 动画播放次数 */
animation-iteration-count: 2;
/* 动画循环交替播放 */
animation-direction: reverse;
}
@keyframes mymove {
from { left: 0; }
to { left: 200px; }
}
</style>
<body>
<h1>动画循环交替播放<h1>
<div></div>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。