正在加载…
请使用更现代的浏览器并启用 JavaScript 以获得最佳浏览体验。
加载论坛时出错,请强制刷新页面重试。
动画基本使用
mufen
动画 (animation)
1、动画的基本使用
(1)用 keyframed 定义动画
代码登录后可见
动画序列
a. 0%是动画的开始,100%是动画的结束。
b. 在 @keyframed 中规定某项 CSS 样式,创建由当前样式改变成新样式的动画效果。
c. 动画是使元素从一种样式变化成另一种样式的效果,次数不限。
d. 用百分比规定变化时间或用关键词"from"和"to",等同于0%和100%。
(2)元素使用动画
代码登录后可见
2、动画常用属性
属性
描述
@keyframed
规定动画
animation
所有动画的简写属性,除了animation-play-state
animation-name
动画名称
animation-duration
规定动画完成一个周期所花的时间秒或毫秒
animation-timing-function
规定动画的速度曲线,默认 ease
animation-delay
规定动画何时开始,默认"0″
animation-iteration-count
规定动画播放的次数 默认"1″
animation-direction
规定动画在下一周期是否逆播放 默认"normal" alternate 逆播放
animation-play-state
规定动画是否正常运行或暂停 默认"running" 还有"pause"
animation-fill-mode
规定动画结束状态后,保持 forwards 回到起始 backwards
3、动画简写属性
animation : 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画其实或者结束的状态;
注:
a.简写属性里面不包括 animation-play-state
b.暂停动画:animation-play-state:puased;经常和鼠标经过等配合使用
c.想要动画走回来,而不是直接跳回来:animation-direction: alternate
d. 盒子动画结束后,停在结束位置 :animation-fill-mode:forwards
4、速度曲线细节
animation-timing-function :规定动画的速度曲线,默认"ease"
值
描述
linear
匀速
ease
动画以低速开始,然后加快,在结束前变慢
ease-in
动画以低速开始
ease-out
动画以低速结束
ease-in-out
动画以低速开始和结束
steps()
指定时间函数中的间隔数量