定义动画:
1.通过@keyframas+自定义动画名称{
}
2.在动画集中通过from和to设置动画的开始和结束状态
@keyframes move{
from{
opacity:0;
}
to{
opacity:1;
}
}
也可以用0%代替from,100%代替to
注意:
◆动画集要单独定义,不能放到类样式中
animation-name属性:
用于定义@keyframes动画规定的名称
animation-name:keyframename;
animation-duration属性:
用于定义动画效果完成所需的时间(秒|毫秒)
animation-duration:time;
animation-timing-function属性:
用于定义动画效果完成的速度变化
一般取linear(匀速),与过渡效果(transition-timing-function)的速度取值一样
animation-delay属性:
定义动画效果执行的延迟时间
animation-delay:time;
animation-iteration-count属性:
定义动画的播放次数
可以取number或者infinite(无限次)
animation-direction属性:
用于定义动画播放的方向