css3动画帧
2024-10-20 16:49:16
动画帧实现:
css3使用steps来实现逐帧动画,动画过程中可能出现抖动,实乃精度偏差问题。
通常在动画里用到百分比单位时会出现抖动或位移现象,解决方法就是转换成具体的rem或px长度单位。
动画一般只有background-position属性,可以有很多帧,steps(1)这样去执行,也可以是两帧,steps(n)来执行。
持续执行的动画帧可能会出现最后一帧跟第一帧一闪而过完全看不到,可以考虑给动画帧的雪碧图加一帧空白帧在最后补位。
.loadEffectBox{
position: absolute;
width: 99px;
height: 121.5px;
left: 50%;
top: 36%;
transform: translateX(-50%);
background: url('../img/loading/effect2.png') no-repeat;
background-size: 1881px 121.5px;
background-position:0 0;
-webkit-animation:roadEffect 1.44s steps(18,end) infinite;
-webkit-animation-fill-mode: backwards;
} @-webkit-keyframes roadEffect{
0% {background-position:0 0;}
100% {background-position:-1782px 0;}
}
动画具体属性参照如下:
值 | 描述 |
---|---|
animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。 |
animation-timing-function | 规定动画的速度曲线。 |
animation-delay | 规定在动画开始之前的延迟。 |
animation-iteration-count | 规定动画应该播放的次数。 |
animation-direction | 规定是否应该轮流反向播放动画。 |
steps对应的是animation-timing-function
steps(number,position)
,有两个参数。
number表示动画的段数,段数等于雪碧图中的关键帧数减1。
position有两个值:end和start。end是默认值。
注意点: start和end搭配forwards和backwards时,可能出现动画闪白,多走一帧的问题,具体要多调测。
网上看到的一个超详细讲解:--》http://wanlimm.com/77201809146901.html
最新文章
- linux deepin-scrot 截图工具
- 使用 InstallShield 制作 Delphi 软件安装包
- Mybatis分页和Spring的集成
- [SQL]开启事物,当两条插入语句有出现错误的时候,没有错误的就插入到表中,错误的语句不影响到正确的插入语句
- int? 参数是这个的时候 是可以传入null的 而int的就不行
- HDU 1814 Peaceful Commission / HIT 1917 Peaceful Commission /CJOJ 1288 和平委员会(2-sat模板题)
- 【转】新手该如何学python怎么学好python?
- 关于Android的https通讯安全
- Android 之dragger使用
- .NET Core微服务之基于Steeltoe使用Hystrix熔断保护与监控
- 巡风源码阅读与分析---AddPlugin()方法
- asp.net core部署到iis中出现 HTTP Error 502.5 - Process Failure的问题
- VUE + ElementUI 从搭建到运行
- Spark2.3(三十四):Spark Structured Streaming之withWaterMark和windows窗口是否可以实现最近一小时统计
- 点击LinearLayout使用selector改变TextView字体颜色
- 删除n天前的所有目录和文件
- switch...case... 语句中的类型转换
- linux shell 脚本攻略学习4
- c++继承、多态以及与java的行为差异之处
- input和React-Native的TextInput的输入限制,只能输入两位小数(阻止0开头的输入),类似价格限制