CSS3animation动画-案例人物走路动画:(三)

SenZendao

于 2018-09-08 21:43:56 发布

阅读量3k

点赞数

分类专栏：前端文章标签： CSS3

本文链接：https://blog.youkuaiyun.com/SenZendao/article/details/82533656

版权

本文详细介绍了如何使用CSS3的animation属性来创建人物走路动画，涵盖了@keyframes定义关键帧、animation-name、animation-duration等核心属性的用法，并提供了一个具体的案例展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性