总结关于动画与过渡的区别,动画属性、动画的实现步骤

动画与过渡的区别

动画与过渡区别的总结
1、实现的效果:过渡可以实现2个状态间的变化过程,动画可以实现多个状态间的变化过程
2、过程是否可控(重复播放、最终画面、是否能够暂停):过渡过程不可控,动画过程可控。

动画属性

## 动画:是在人的脑海里快速切换大量图片时在人脑海里形成的具有连续性的画面

1、单位:帧或者动画帧
2、动画三要素,时间 起始状态 结束状态
一、属性以及取值
1、animation-name动画名称
2、animation-duration
动画时长
3、animation-delay延迟时间
4、animation-fill-mode
=动画执行完毕后的状态 forwords:最后一帧状态 bcckwords:第一帧状态
5、animation-timing-function速度曲线 steps(数字)逐帧动画/linear匀速执行动画=两者添加动画效果只能写其一
6、animation-iteration-count重复次数 infinite:无限循环
7、animation-direction
动画执行方向 alternate反方向
8、animation-play-state暂停动画 pause暂停,通常配合hover使用
二、逐帧动画
=steps实现
1、属性:animation-timing-function =速度曲线=steps(数字)逐帧动画
注1.在总结逐帧动

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值