如何在网页中实现动画效果

animation翻译为  动画

 

什么是过渡?

过度就是(transition)

通过过渡可以指定一个属性发生变化时的切换方式

通过过渡可以创建一些非常好的效果,提升用户的体验

transition-property:指定要执行过渡的属性

多个属性间使用,隔开

如果所有属性都需要过渡,则使用all关键字

大部分属性,都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡

transition-duration:指定过渡效果的持续时间

时间单位,S和ms   1s=1000ms

transition-timing-function:过渡的时序函数

指定过渡的执行方式

可选值ease默认值,慢速开始,先加速,再减速

linear匀速运动

ease-in加速运动

ease-out减去运动

ease-in-out先加速,后减速

cubiv-bezier()来指定时序函数

https://cubic-bezier.com

steps()分步执行过渡效果

可以设置第二个值

end在时间结束时执行过渡

start在时间开始时执行过渡

transition-delay:过渡效果的延迟,等待一段时间后再执行过渡

transition可以同时过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值