如想要看到div的宽度由1000px变为100px的过程 将鼠标移入div 试试

  1.  div {
  2.       width: 1000px;
  3.       height: 100px;
  4.       background-color: aqua;
  5.       /* 要过渡的属性 width*/
  6.       transition-property: width;
  7.       /* 过渡的持续时间 3s*/
  8.       transition-duration: 3s;
  9.     }
  11.     div:hover{
  12.       width: 100px;
  13.     }

语法

  1. transition-property 要执行过渡的属性名
    如width，height transition-property: width; 写all代表全部
  2. transition-duration 执行过渡的持续的时间
    设置过渡的持续时间 如 transition-duration:10s
  3. transition-timing-function 速度曲线 (可省略)设置变化的速度曲线 如匀速等
    • linear： 匀速
    • ease： 慢-快-慢 默认值
    • ease-in： 慢-快。
    • ease-out： 快-慢。
    • ease-in-out： 慢-快-慢。
    • 贝塞尔曲线（了解）
    • steps 设置 跳跃性的动画 （了解）
      steps (n) 过渡分成n段
      steps (n,start) 在该段时间的开始 触发
      steps(n,end) 在该段时间的 末端 出发
  4. transition-delay 延迟时间 （可省略）
    设置产生过渡时的延迟时间 如 transition-delay: 10s;

可以使用复合写法<br />
/* 过渡的属性为width 持续3s 匀速 延迟0s */ transition: width 3s linear 0s;
多个过渡写法
可以同时对一个元素的多个属性添加过渡 对宽度和高度设置不同的过渡<br />
transition:

  1. width 1s ease-in 1s,

  2. `height 10s ease-in-out 2s;```

    过渡效果鼠标移动bug

    移入的过渡效果 鼠标移入的时候 盒子会有过渡的移动步骤
    盒子一旦离开了鼠标移入的位置就会重新跳回来 碰到鼠标又跳出去 就会出现抽搐的bug
    需要使用父相子绝的方法 鼠标移入父盒子 让子元素过渡移动 达到想要的效果

    .box{
         width: 100px;
         height: 100px;
         background-color: khaki;
         position: relative;

     }
     p{
         top: 0;
         left: 0;
         width: 100px;
         height: 100px;
         background-color: lawngreen;
         position: absolute;
         transition:1s;
     }
     .box:hover p{
         margin: 200px;
     }