过渡模块

1.过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长

2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;

<style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            /*transition: width,3s;*/
            /*告诉系统哪个属性需要执行过渡效果*/
            transition-property: width,background-color;
            /*告诉系统过渡效果持续的时长*/
            transition-duration: 3s,2s;
        }

        /*.box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            transition: background-color, 3s;
        }*/

        /*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
        .box1:hover{
            width: 500px;
            background-color: greenyellow;
        }

        /*.box2:hover{
            background-color: green;
        }*/
    </style>
<div class="box1"></div>
<div class="box2"></div>

过渡模块其余属性
- transition-delay: 2s;告诉系统延迟多少秒之后才开始过渡动画
- transition-timing-function: linear;告诉系统过渡动画的运动的速度类型
  - transition-timing-function属性取值linear,ease,ease-in,ease-out,ease-in-out
    速度类型
过渡属性连写
- transition: 过渡属性过渡时长运动速度延迟时间;
- 过渡连写注意点
  2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
  2.2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
  2.3如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
  transition:all 0s;
- 编写过渡套路
  1.1不要管过渡, 先编写基本界面
  1.2修改我们认为需要修改的属性
  1.3再回过头去给被修改属性的那个元素添加过渡即可