CSS动画效果之animation
属性讲解
animation: 属性
animation: name | | duration | | timing-function | | delay | | iteration-count | | direction;
name: 规定需要绑定到选择器的 keyframe 名称
duration : 规定完成动画所花费的时间,以秒或毫秒计
timing-function: 规定动画的速度曲线
可取的值:
linear: 动画从头到尾的速度是相同的。
ease:默认。动画以低速开始,然后加快,在结束前变慢
ease-in: 动画以低速开始。
ease-on: 动画以低速结束。
ease-in-out: 动画以低速开始和结束
delay :规定在动画开始之前的延迟
iteration-count:规定动画应该播放的次数
direction:规定是否应该轮流反向播放动画
可以取的值:normal(默认值,正常播放) | | alternate(轮流反向播放)
举个栗子
.a {
animation: splane 1s ease-in-out infinite;
//infinite 无限循环的意思
}
@keyframes splane{
0%{
transform: scale(1);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(1);
}
}
原理讲解
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
栗子讲解
0% ->100%是时间变化;
{ }里面写样式,从一个样式通过一个时间变成另外一个样式,实现动画效果;
transform:scale() 表示缩放;
scale(1.2)放大到1.2倍;
scale(0.8)放大到0.8倍,实际上是缩小到原来的百分之八十。