过渡动画、弹性盒子、calc计算函数

一、过渡动画

过渡动画需要触发才能执行

• transition-property 参与过渡的属性

参与过渡的属性   如果不写 默认是all
transition-property:width,height,background;  //如果有多个参与过渡的属性，中间用逗号隔开
transition-property: all;  all 代表所有属性都参与过渡
​

• transition-duration 过渡的完成时间

 
/* 过渡的完成时间  s秒  ms毫秒   1s=1000ms*/  必填
 transition-duration:5s;

• 过渡代码的位置

​
如果希望只有划入时有过渡，那就把过渡属性写在hover里
​
如果希望划入和滑出都有，那就把过渡属性写到盒子本身
​

• transition-timing-function 过渡的执行速度

​
 transition-timing-function:ease;  默认速度  下图5个速度是自带的五个值  linear匀速
 transition-timing-function: cubic-bezier(0,1.9,1,-1.07);可以自定义速度
 贝塞尔曲线官网：https://cubic-bezier.com/#0,1.9,1,-1.07

• transition-delay 过渡的延迟时间

  transition-delay:2s;

  说明：这些属性都可以写多个值，和过渡的属性一一对应

              transition-property:height,background,width;
              transition-duration:4s,1