css3之动画
程序员文章站
2022-03-16 19:10:51
...
css3之动画
1、什么是动画
动画(animation),使元素从一种样式逐渐变化为另外一种样式的过程
2、完成动画所需要的步骤
1、声明动画
在特定的时间点上设置动画的样式
时间点:是个模糊时间,而不是具体时间
样式:元素的样式
2、为元素调用动画
通过 animation 属性 调用动画
并且指定动画的播放时长、次数等
3、声明动画
1、作用:通过@keyframes关键字,声明动画的"关键帧"
关键帧:某个时间点上的特殊效果
2、语法:
@keyframes 动画名 {
0% | from {
/*动画开始时的样式效果*/
width:100px;
height:100px;
background:red;
}
...
50%{
background:green;
}
...
100% | to {
/*动画结束时的样式效果*/
width:100px;
height:100px;
border-radius:50%;
background:blue;
}
}
兼容性:
Chrome&Safari: @-webkit-keyframes 名{}
Firefox: @-moz-keyframes 名{}
Opera: @-o-keyframes名{}
4、调用动画(兼容性)
1、animation-name指定调用动画的名称
2、animation-duration
完成一个动画周期的时间,必须设置的属性,s | ms 作单位
3、animation-timing-function
完成动画时的速度时间曲线函数
4、animation-delay动画播放之前的延迟
5、animation-iteration-count
动画播放次数
取值:
- 具体数值
- infinite :无限次播放
6、aniamtion-direction
动画播放方向
取值:
3. normal,默认值,正向播放(0%~100%)
4. reverse,逆向播放(100%~0%)
5. alternate,奇数播放次数是正向播放,偶数播放次数时,逆向播放
7、简写方式 - animation
animation:name duration timing-function delay iteration-count direction;
8、animation-fill-mode
规定动画在播放之前或之后,动画效果是否可见。
取值:
6. none不改变默认行为
7. forwards :动画播放完成后,保持在最后一个 帧 的状态上
8. backwards :动画播放之前(延迟时间内),保持在第一个帧的状态上
9. both:动画播放前后都采用填充模式
9、animation-play-state
规定动画的播放状态(运行或暂停)
取值:
10. paused : 暂停
11. running : 播放
参考博客
css3动画:实现无限循环进度条: https://blog.csdn.net/weixin_37858072/article/details/90260401