animation 动画

Posted zhangyongxi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了animation 动画相关的知识,希望对你有一定的参考价值。

分两步:
[email protected] 动画的名称{
0%{} 开始帧 0% = from
50%{} 中间帧
100%{} 结束帧 100% = to
}
2.通过animation的八大属性去调用上面规定的动画名称以及其他的属性
简写: animation: 1 2 3 4 5 6 7 8;

1)animation-name 动画的名称
2)animation-duration 动画持续的时间 - 时间越长 越慢 反之越块
3)animation-timing-function 动画的运动曲线
ease 匀速
ease-in 由慢到快的过程
ease-out 由快到慢的过程
ease-in-out 由慢到快 再到慢的过程
steps()
4)animation-delay 动画的延迟时间
5)animation-interation-count 动画运动的次数 默认1次 infinite无限次
6)animation-direction 动画的运动方向
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行
7)animation-play-state 动画的运动的状态
运动 playing
暂停 paused
8)animation-fill-mode 动画运动结束之后保留的状态
保留在开始状态: backwards
保留在结束状态: forwards
保留在开始/结束 状态both






























以上是关于animation 动画的主要内容,如果未能解决你的问题,请参考以下文章

如何在animate中给动画添加一个播放按钮

Unity 动画系统 Animation 和 Animator的小实例

动画animation transition 属性

jquery的animate动画能不能在IE中执行

animation 动画

如何停止css animation动画