transition 被动动画

tips：浏览器自身为主动，需要我们去触发才能运行的动画为被动

可以与:hover或者:checked结合

可以通过设置.box和.box:hover实现慢开快回、快开慢回等效果

.box{
     width: 100px;
     height: 100px;
     background-color: red;
     transition: all 1s;
}
.box:hover{
     width: 500px;
     transition: all;
}

<div class="box"></div>

鼠标未悬浮

鼠标悬浮（当鼠标移开之后，会在1s内缓慢恢复到未悬浮的大小）

一、复合属性transition

transition：属性名  时间  贝塞尔曲线  延时

.box1{
      width: 100px;
      height: 100px;
      margin-top: 10px;
      background-color: red;
      /*transition：属性名  时间  贝塞尔曲线  延时*/
      transition: all 4s ease -2s;
      position: relative;
      left: 0;
}
body:hover .box1{
      left: 1000px;
}

<div class="box1">box1</div>

 

1、transition-property:属性名

transition-property:all;元素的所有属性都会有动画效果；（例如：width、height、left、right等）

2、transition-duration:时间

元素在一定时间内发生变化 

transition-duration:1s;

3、transition-delay:延时

元素经过该时间后再生效动画样式（可以取负值，负值会加快动画时间）

正数延时，负数加快

transition-delay:1s;

4、transition-timing-function: 贝塞尔曲线

元素动画运动的轨迹

 

先慢 再快 再慢

transition-timing-function: ease;

匀速运动

transition-timing-function: linear;

匀加速运动

transition-timing-function: ease-in;

匀减速运动

transition-timing-function: ease-out;

 加速、减速

transition-timing-function: ease-in-out;

x轴：时间

y轴：距离

贝塞尔曲线网址：cubic-bezier.com

transition-timing-function: cubic-bezier(.17,.67,.83,.67);