CSS3 Animation 帧动画 steps() --冯浩的博客

CSS3的Animation 复合使用:
animation: move 1s steps(12,end) infinite ;

第一个参数是调用keyframes动画
第二个参数规定的时间
第三个参数steps(12,end)     
steps() 函数:
	steps(12,end) 
	第一个参数是在规定的时间中的间隔数量;
	第二个参数值有两个(end和start)
		end:动画执行时以结尾端点为开始;
		start:动画执行时为开始左侧端点的部分为开始
第四个参数:重复的次数    infinite(无限次的循环)

@keyframes move{
				from{
					background-position: 0 0;
				}
				to{
					background-position:-576px 0;
				}
			}

CSS3的Animation有八个属性

animation-name :动画名  fn
animation-duration:时间  1s
animation-delay:延时 1s
animation-iteration-count:次数  infinite
animation-direction:方向   alternate(反向)
animation-play-state:控制    running paused
animation-fill-mode:状态  forwards(当动画完成后,保持最后一个属性值)
animation-timing-function:关键帧变化 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值