多语言展示
当前在线:287今日阅读:155今日分享:35

CSS怎么做一个可以走动的动画?

CSS3 animation动画本篇经验分享怎么写一个会走动的动画
方法/步骤
1

我们要用到的属性如下: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;同时设置多个属性

2

定义一个DIV:    

3

将DIV样式全部写好如下:

推荐信息