css3关键帧动画animation

CSS关键帧动画

• @keyframes 设定动画规则。

• animation 所有动画属性的简写属性，用于设置六个动画属性：

  animation-name/animation-duration/animation-timing-function/animation-delay/
  animation-iteration-count/animation-direction

1. animation-name 属性为@keyframes 动画规则名称。若设置为none则覆盖已有的动画效果。

2. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是0。

3. animation-timing-function 规定动画的速度曲线。默认是“ease”。

   (1) linear规定以相同速度开始至结束的过度效果（等于cubic-bezier(0,0,1,1)）。

   (2) ease 规定慢速开始，然后变快，然后慢速结束的动画效果。（等于cubic-bezier(0.25,0.1,0.25,1)）

   (3) ease-in 规定以慢速度开始的过度效果。（等于cubic-bezier(0.42,0,1,1)）

   (4) ease-out 规定以慢速度结束的过度效果。（等于cubic-bezier(0,0,0.5,1)）

   (5) ease-in-out 规定以慢速度开始和结束的过渡效果。（等于cubic-bezier(0.42,0,0.58,1)）

   (6) cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。

4. animation-delay 规定动画延迟时间。默认是0。

5. animation-iteration-count 规定动画被播放的次数。默认是1。infinite为无限次数播放。

6. animation-direction 规定动画是否在下一周期逆向播放。默认是“normal顺序播放”。/alternate动画应该轮流反向播放。

7. animation-play-state 规定动画是否在运行或暂停。默认是“running规定动画正在播放。”/paused规定动画暂停。

8. animation-fill-mode 规定对象动画时间之外的状态。

   (1) none 不改变默认行为。

   (2) forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

   (3) backwards 在animation-delay 所指的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

   (4) both 向前和向后填充模式都被应用。

#div1 {
				width: 150px;
				height: 150px;
				background: aqua;
				border: #996633 3px double;
				/*设置动画的名称和事件*/
				animation-name: mydh;
				animation-duration: 3s;
				animation-timing-function: linear;
				/*规定动画的速度曲线*/
				animation-delay: 1s;
				/*规定动画何时开始。默认是0。*/
				animation-iteration-count: 3;
				/*规定动画被播放的次数。默认是1。infinite为无限次数播放。*/
				animation-direction: alternate;
				/*规定动画是否在下一周期逆向播放。默认是“normal顺序播放”。/alternate动画应该轮流反向播放。*/
				animation-fill-mode: forwards;
				/*规定对象动画时间之外的状态。*/
			}
			
			#div2 {
				margin-top: 30px;
				width: 150px;
				height: 150px;
				background: yellow;
				border: green 3px double;
				/*复合属性*/
				animation: mydh 8s ease 0s 4 alternate;
			}
			/*设置动画起始位置*/
			
			@keyframes mydh {
				/*第一种动画方式*/
				from {
					margin-left: 20px;
					background: yellow;
				}
				to {
					margin-left: 800px;
					background: yellowgreen;
				}
			}

		<div id="div1">
		</div>
		<div id="div2">
		</div>