移动端 第十一章动画

动画的属性:

animation
animation-name:动画的名字
animation-duration:动画完成一个周期所花费的时间(秒/毫秒)
animation-timing-function:动画的速度曲线
(linear ease ease-in ease-out ease-in-out 贝塞尔曲线)
animation-delay:动画何时开始
animation-iteration-count:动画被播放的次数 number/infinite(无限循环) 
animation-direction:动画是否在下一周期逆向的播放  normsl/alternate(反向播放)
animation-play-state:动画是否正在运行或暂停 paused(暂停)/running(正在播放)
animation-fill-mode:动画时间之外的状态 （和延迟连用 ）
forwards(保留动画结束时的状态) 
backwards(不会保留动画结束时的状态)
both(上面两种状态都有)

关键帧:

	@keyframes name{           @keyframes name{
		from{}							0%{}
		to{}							10%{}
	}									20%{}
										30%{}
										40%{}
										50%{}
										60%{}
										70%{}
										100%{}
									}
		

	

css:

div{
		width: 100px;
			height: 100px;
			background: red;
			/*动画名字（动画的名字要有语义化）*/
			/*animation-name:movedh ;*/
			/*动画完成的时间*/
			/*animation-duration: 1s;*/
			/*动画播放次数*/
			/*animation-iteration-count: 3;*/
			/*animation-iteration-count: infinite;*/
			/*综合写法*/
			animation: movedh 1s 2s infinite;
			
		}
		div:hover{
			/*播放/暂停*/
			animation-play-state:paused;
		}
		/*关键帧*/
		@keyframes movedh{
			from{
				width: 100px;
			}
			to{
				width: 1000px;
			}
		}	

html:

<div></div>