自定义动画

语法:@keyframes 动画名称{
0%{

}
50%{

}
100%{

}
}

animation-name 加载动画的名称
animation-duration 动画的持续时间0
animation-iteration-count 动画的播放次数
infinite 无限循环
animation-direction
animation-direction动画播放的方向
alternate 奇数次正常播放,偶数次反向播放
alternate-reverse 偶数次正常播放,奇数次反向播放
normal (默认值)每次播放都是正常顺序播放
animation-timing-function
linear 匀速
ease 速度先快再慢(默认值)
ease-in 速度越来越快
ease-out 速度越来越慢
ease-in-out 先加速再减速
animation-delay
动画延迟多长时间开始
animation-fill-mode 设置动画停止时的状态
forwards 动画停止在动画结束后的位置
backwards 动画停止后回到初始状态(默认值)
animation-play-state动画播放的状态
running 将暂停的画面重新播放
paused 将正在播放的元素画面停下来

简写:animation:
animation-name (动画的名称)
animation-duration (动画的持续时间)
animation-timing-function (动画的运行速度)
animation-delay (动画的延迟多长时间开始)
animation-iteration-count (播放的次数)
animation-direction (方向)
animation-play-state (播放的状态)
animation-fill-mode (设置动画停止时的状态)

未经允许不得转载:杂烩网 » 自定义动画

评论 0

#快捷签到点我#

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

置顶文章