目录
从5月初开始学习前端也有个多月了,在学习中也开始正上了正规,进入了学习动画效果的阶段了,今天来聊聊css3中的动画属性animation,在没接触animation动画时,都觉得要用jquery来操作的。今天我来说说我学习后的一个动画案例.也算是一个CSS的基础动画学习总结.先来看看完成后的效果图:
点击查看GIF效果
在做这个动画效果前,你要有一份这个动画的静态关键帧图片 
在HTML里只需要建一个盒子即可,其他全部用CSS样式来完成
<body>
<div class="box"></div>
</body>CSS里面代码
<style>
*{ /*样式初始化 */
margin:0;
padding:0;
}
.box{
width:180px; /*宽度 */
height:300px; /*高度 */
margin:50px auto; /*上下50px,左右居中 */
background:url("charector.png") no-repeat; /*导入背景图片,背景图片不平铺 */
animation:run 1s infinite; /*动画效果:名字,1秒,无限的循环动画 */
animation-timing-function:steps(6);/*动画曲线:steps方式过渡6份 */
}
@keyframes run{ /*规定动画帧*/
from{/*开始动画帧样式*/
background-position-x:0;
}
to{/*结束动画帧样式*/
background-position-x:-1080px;
}
}
</style>OK，这样，就大功告成了，有兴趣的可以试一下。那么这个案例就结束了。 以上是本文的全部内容为博主笔记，希望大家可以喜欢，动手去实践一下。
文章链接：https://zuike7.com/187.html
文章标题：利用css3动画效果animation-来制作逐帧动画
文章版权：醉客网 (zuike7.com) 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！文字及下载资源均是用户投稿及网上搜集，仅供网友学习交流，请勿作他用。
本文最后更新发布于
文章标题：利用css3动画效果animation-来制作逐帧动画
文章版权：醉客网 (zuike7.com) 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！文字及下载资源均是用户投稿及网上搜集，仅供网友学习交流，请勿作他用。
本文最后更新发布于
2022年05月13日 14时11分51秒，某些文章具有时效性，若有错误或已失效，请在下方留言或联系醉疯怪：
[email protected]
