17-CSS3过渡

CSS3 过渡

基本概念

• transiton提供了一种在更改css属性的时候，控制动画的速度的方法；它可以控制某个属性在指定时间内完成效果，而不是立即生效的，也可以控制过渡的变化的速率。

属性

transition-property

• 设置过渡的属性名

• 语法：

  transtion-property:css属性名1，css属性名2.....；
  

  • 默认值all，代表所有属性多可以过渡

• 注意：

  • 只设置过渡属性名，是没有效果的，需要配合过渡时长使用
  • 多个属性同时过渡时，中间使用逗号隔开

transition-duration

• 设置过渡的时长

• 语法：

  transiton-duration:时间；
  

  • 时间需要带单位， s代表秒 ms代表毫秒，可以是小数 1s=1000ms
  • 默认0s

• 注意：

  • 如果过渡的属性名多于过渡的时间个数时，时间重复一遍

  • 多个时间之间使用逗号隔开

    案例：

        .box{
              width: 100px;
              height: 100px;
              background-color: orange;
              margin: 100px auto;
              
              /* 设置过渡属性可以有多个属性，多个属性用逗号来隔开 */
              transition-property: width,height,background-color;
              /* 
              设置过渡时间要和过渡属性值得顺序保持一致，才能一一对应
              但是如果过渡属性比过渡时间多，那过渡时间只能复制一遍
              */
              transition-duration: 2s,3s;
          }
          .box:hover{
              width: 200px;
              height: 200px;
              background-color gray;
          }
  

transition-timing-function

• 设置过渡的速率
• 属性值：
  • ease：以低速开始，然后变快，在结束前变慢
  • linear：匀速
  • ease-in:以低速开始
  • ease-out：以低速结束
  • ease-in-out:以低速开始和结束
  • cubic-bezier();：贝塞尔曲线

贝塞尔曲线（自动义速度曲线）

• 是一种用于构建二维图形的速度曲线，本质是一个数学曲线

• 作用：在css中，贝塞尔曲线用来定义的动画的速度曲线

• 语法：

  cubic-bezier(x1,y1,x2,y2);
  

  注意：这两个坐标用于控制曲线的形状，不同形状所对应的速度不一样，甚至可以为负数

• 构建贝塞尔曲线：https://cubic-bezier.com/

贝塞尔曲线（自动义速度曲线）

• 设置过渡的延迟时间，也就是过渡效果何时开始，默认为0s

transition

• 过渡的复合属性

• 语法：

  transition: 属性名  过渡时长  过渡的延迟  速度
  多个属性过渡，中间使用逗号隔开
  transition：属性名1  过渡时长  过渡的延迟  速度，属性名2  过渡时长  过渡延迟  速度；
  

  • 特别注意：两个时间，前面代表过渡时长，后面代表延迟时间

• 注意：transition针对display没有效果

兼容性问题

IE 10+、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：IE 10 以下版本，不支持 transition 属性。
注释：Chrome 25 以下版本，需要前缀 -webkit-。

练习

二级菜单练习

0 以下版本，不支持 transition 属性。
注释：Chrome 25 以下版本，需要前缀 -webkit-。

## 练习

二级菜单练习

[外链图片转存中...(img-NmAp3x4D-1663674191439)]