首页 > 代码库 > CSS3 动画模块
CSS3 动画模块
动画模块
动画格式
//1.告诉系统需要执行哪个动画
animation-name:动画名
//3.告诉系统动画持续时间
animation-duration:时间
//2.告诉系统所需要创建一个名字为(动画名)的动画
@keyframe 动画名 {
from(0%){
margin-left:0;
}
to(50%){
margin-left:500px;
}
}
动画属性
animation-delay 告诉系统延迟多少秒执行动画
animation-timing-function 规定动画速度曲线
animation-iteration-count 规定动画播放次数,默认为1
animation-direcyion 规定动画是否在下一周期进行逆向播放。默认normal,另一个是alternate表示动画反向播放
animation-play-state 规定动画是否执行或暂停 默认running ,另一个是paused表示暂停
动画有三种状态:等待状态 执行状态 结束状态
animation-fill-mode 指定动画等待状态和结束状态的样式
none 默认状态 forwards让动画的最后一帧保持结束状态的样式
backwards让动画的等待状态为动画第一帧的样式 both forwards+backwards
动画连写
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
CSS3 动画模块
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。