0


css动画(animation)常用属性

1.animation-name:动画名称

2.@keyframes:动画定义,后面跟动画名称

3.animation-duration:动画持续时长,单位(s)

4.animation-delay:动画延时生效,单位(s);可为负值,当为负值时候,应解读为已播放n秒
如:-2s表示动画已播放2s,从2s后开始播放

5.animation-iteration-count:动画运行次数,参考值有:infinite(无限循环)

6.animation-direction:动画运行方向规则:参考值有:
① normal(正常播放,默认值),
② reverse (反向),
③ alternate (先正向,后反向,交替),
④ alternate-reverse(先反向,后正向,交替)

7.animation-timing-function:动画运行曲线,参考值有:
① ease :慢-快-慢
② linear :匀速运动
③ ease-in:慢进
④ ease-out:慢出
⑤ ease-in-out :慢进慢出
⑥ cubic-bezier(n,n,n,n):用贝塞尔函数自定义动画运行曲线

8.animation-fill-mode:动画填充模式:
① none :默认值,不应用任何样式
② forwards :应用动画最后一个关键帧的样式值
③ backwards:应用动画第一个关键帧的样式值,并在动画延迟期间保留该值。
④ both 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性

9.animation-play-state:动画运行或者暂停
① paused:暂停
② running:播放

10.animation:集合6种动画简写属性,顺序:动画名称,运行时长,运行曲线,延时,运行次数,运行方向规则

标签: css 动画 css3

本文转载自: https://blog.csdn.net/weixin_44234386/article/details/128957653
版权归原作者 凉生陌汐梦 所有, 如有侵权,请联系我们删除。

“css动画(animation)常用属性”的评论:

还没有评论