5行代码 超级简单 用css做好看的动画 实现背景颜色渐变过渡，宽高动态过渡
经常我们需要改变一个元素的样式时候，直接过渡会十分生硬，如果加上过渡效果，变换的过程柔和许多看着也就更好看了。
废话不多说，先上效果图：
上面的效果图的演示过程：
1.首先是展示没有动画的效果
2.然后是div方块所有属性的值，在变化的时候都有动画的效果
3.再接着是只有背景颜色在改变的时候，有动画的效果
4.最后是只有长度改变的时候，有动画的效果，其他属性改变没动画效果
上代码：
<style>
.box {width:100px;height:100px;margin:50px auto;background-color:red;transition:all 1s;}
.box:hover {background-color:yellow;height:200px;width:200px}
</style>
<div class="box"></div>
动画的关键在于第二行的最后一个属性：transition:all 1s;
这个属性表示要有过渡的属性，和过渡的时间，比如需要长度有1秒的过渡时间，那就是：transition:height 1s;如果需要背景变化时有2秒的过渡时间，那就是：transition:background-color 2s;
然后只要使用了该样式的元素，在样式有改变的时候，就会按着transition值中的对应属性和时间来过渡。
如果我的文章对您有帮助，就请客官给个赞吧
THE END!
作者：fucaijin
来源链接：https://blog.csdn.net/fucaijin/article/details/103589483
