css animation 入门

animation:name[keyframes] 
	duration[2s]  
	timingFunction[linear|ease-in-out]bezier
	delay 
	iterationCount[infinite]  
	direction[normal|reverse|alternative] 
	fillMode [none|forward|backward] 
	playState[running|stop]

@keyframes slidein{from{margin-left:-20%} to{margin-left:100%}} 
@keyframes rotate{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}

• name:keyframes名称
• duration:持续时间
• timingFunction: bezier 插值函数
• delay : delay 时间
• iterationCount迭代次数
• direction:方向normal从keyframes from端执行，rotate从to端执行
• fillMode :初始和结束后如何填充目标对象，forward 使用开始帧，backward使用结束帧
• playState:播放状态

Posted in: WEB开发