transition过渡

transition过渡

定义和用法
transition用于设置四个过渡属性:
1、transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;
2、transition-duration : 规定完成过渡效果需要多少秒或毫秒。
需要添加单位:s (秒) ms (毫秒) 1s == 1000ms
3、transition-delay : 定义过渡效果何时开始。
eg:
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 )这是贝塞尔曲线在线取值的网址:
这里我们可以通过拖动线条来实现自己想要的运动效果,
点击copy复制代码直接使用。在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
transition属性一般使用复合写法:
eg:
transition:all 2s linear;
transition:linear 2s all;
transition:2s linear all; (这几种写法是没有顺序的)
注意:当总时间与延迟时间同时存在的时候,就有顺序了,第一个是总时间,第二个是延迟时间。
eg:
transition:2s 3s linear all;
注意:不要把transition放到hover中,此时只有当鼠标移入才会有过渡效果,鼠标移出是没有过渡效果的。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值