CSS3动画常见属性

属性描述
@keyframes定义动画
animation所有动画属性的简写属性,除了animation-play-state
animation-name规定@keyframes动画的名称
animation-duration规定动画完成一个周期所花费的秒或毫秒,默认是0
animation-time-function规定动画速度曲线,默认是“ease”
animation-delay规定动画何时开始,默认是0
animation-iteration-count规定动画被播放的次数,默认是1,还有infinite
animation-direction规定动画是否在下一周期你想播放,默认是“nomal”,还有“pause”
animation-fill-mode规定动画结束后的状态,保持forward回到起始backwards
animation-play-state规定动画是否正在运行或暂停,默认是“running”,还有“paused”

animation-time-function:规定动画的额速度曲线,默认是“ease”。

描述
linear动画从头到尾的速度是相同的,匀速
ease默认。动画以低速开始,然后加快,再低速减慢
ease-in动画以低速开始
ease-in-out动画以低速开始和结束
steps指定了时间函数中的间隔数量(步长)

动画复合写法:
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或者结束的状态

animation:move 5s linear 2s 1 alternate forwards;

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值