CSS3-简单动画属性

transition

语法:transition: property duration timing-function delay;

• transition 简写属性,用于在一个属性中设置四个过渡属性
• property 规定用于过渡的CSS属性的名称 例如改变的是宽度 就写width
• duration 定义过渡效果花费的时间 默认是0
• timing-funcation 规定过渡效果的时间曲线,例如:ease, ease_in,ease_out.类似这种淡入淡出的效果,默认是ease.
• delay 规定过渡效果何时开始 默认是0

简单的过渡变大动画

animation

在CSS3中,除了使用transitions功能实现动画之外,还可已使用animation实现复杂的动画效果,创建animation动画,首先要了解@keyframs规则.

@keyframes规则是创建动画,@keyframs规则内指定给一个CSS样式和动画将逐步从目前的样式更新为新的样式.

通常使用百分比来规定变化发生的时间,或者使用关键词from和to,等同于从0%和100%, 0%是动画的开始,100%是动画的结束.

animation的语法,除了上面列出的transition动画的四个属性之外,还增加了如下属性:

• animation-iteration-count 动画播放的次数
• animation-drection 规定动画是否在下个周期逆向播放,默认是normal
• animation-play-state 规定动画是否正在运行或者暂停,默认是running