作用：
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-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>