CSS3-2D效果之过渡

先说说为什么要添加过渡效果？

1. 如果物体状态发生变化，没有过渡，效果是瞬间变化的

2. 如果加上了过渡，那么这个过程就会有动画过程

3. 整个状态变化的过程是由浏览器来完成的， 我们只需要关注开始状态与结束状态即可

   主要代码: transition: all 1s;

过渡的注意点

1. 过渡必须要有两个状态的变化
2. 过渡可以写在A状态，也可以写在B状态，但是如果写在B状态上，那么状态变回去的时候，就没有过渡效果了

下面贴上代码

CSS代码
     .box {
        width: 300px;
        height: 300px;
        background-color: pink;
        position: relative;
        left: 0;
        top: 0;
      }

      .box:hover {
        width: 600px;
        height: 600px;
        background-color: lime;
        left: 100px;
        top: 100px;
        transition: all 1s;
        box-shadow: 10px 10px 50px pink;
      }
      
HTML代码      
    <div class="box"></div> 
    ```
这样写好 就能看到简单的过渡效果了