前端入门知识：CSS-3

这一篇我们来学习CSS中的animation动画属性。

它的语法是animation:     name    duration    timing-function    delay   iteration-count    direction    fill-mode play-state;

 

值	说明
name	指定要绑定到选择器的关键帧的名称
duration	动画指定需要多少秒或毫秒完成
timing-function	设置动画将如何完成一个周期
delay	设置动画在启动前的延迟间隔。
iteration-count	定义动画的播放次数。
-direction	指定是否应该轮流反向播放动画。
ill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
play-state	指定动画是否正在运行或已暂停。

当然必不可少的还有@keyframes翻译成中文，是"关键帧"的意思。使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。

它的语法结构为@keyframes animationname { keyframes-selector { css-styles;} }

参数解析:

animationname:声明动画的名称。

keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。

 

"from" 和 "to"的形式等价于 0% 和 100%。建议始终使用百分比形式。

css-styles：想要实现动画的CSS样式。（可以是位置、颜色等）

 

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。
inherit	从父元素继承属性。