码迷,mamicode.com
首页 > 其他好文 > 详细

animation 动画

时间:2018-08-26 12:00:35      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:eps   属性   简写   func   -o   int   运行   状态   过程   

分两步:
1.@keyframes 动画的名称{
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 动画

标签:eps   属性   简写   func   -o   int   运行   状态   过程   

原文地址:https://www.cnblogs.com/zhangyongxi/p/9536355.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!