HTML中的css3过渡详解

1.transition-property:规定设置过渡效果的CSS属性的名称。
transition-property:all(默认值)->宽高过渡
transition-property:width->宽过渡
transition-property:height->高过渡
2.transition-duration:规定完成过渡效果需要多少秒或毫秒。
transition-duration:5s->5s完成效果展示
注:需要添加单位:s (秒) ms (毫秒) 1s == 1000ms
3.transition-delay :定义过渡效果何时开始。
transition-delay : 2s //延迟两秒进行过渡
transition-delay : -2s //提前两秒进行过渡
4.transition-timing-function : 规定速度效果的速度曲线。
Linear:匀速
ease(默认值):逐渐慢下来
ease-in:加速
ease-out:减速
ease-in-out:先加速后减速
cubic-bezier:贝赛尔曲线
( http://cubic-bezier.com )
复合写法:
无先后顺序,以下三种使用方式都行
transition:all 2s linear; transition:linear 2s all; transition:2s linear all;
注意:当总时间与延迟时间同时存在的时候,第一个是总时间,第二个是延迟时间。
transition:2s 3s linear all;
注意:不要把transition放到hover中
下面展示一些‘内联代码片
在这里插入图片描述
具体运行结果如下:

过渡运行结果

本人前端小白一个,分享一下学前端的经验,希望借助此博客和大家分享交流。
《逆战班》

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值