CSS3 动画
动画
动画的基本使用
制作动画分为两步:
1.先定义动画
2.再使用(调用动画)
1.用keyframes定义动画
@keyframes 动画名称{
0%{
width: 100px;
}
100%{
width: 200px;
}
}
动画序列
●0%是动画的开始, 100%是动画的完成。这样的规则就是动画序列。
●在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
●动画是使元索从- -一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
●请用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%。
动画常用属性
动画简写属性
animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation:myfirst 5s linear 2s infinite alternate;
速度曲线细节:
animation-timing-function:linear(匀速)/ease(低速开始,然后加快,在结束前变慢)/ease-in(动画以低速开始)/ease-out(以低速结束)/ease-in-out(以低速开始 和结束)/steps()(分几步完成动画)