# CSS过渡与动画 ## 前言 过渡和关键帧均是实现动画的方式，但他们是**两个系统**的。他们的属性有相似性。 ## 可被用来过渡的属性 background-color background-position border-color border-width border-spacing bottom color font-size font-weight height left letter-spacing line-height magin max-height max-width min-height min-width opacity outline-color outline-offset outline-width text-indent text-shadow z-index word-spacing visibility verticle-align ...其他我懒得打的属性... ## 实战一下 HTML ```html <div class="box"></div> ``` CSS ```css body { background: #333; } .box { background: #fff; width: 300px; height: 300px; position: relative; margin: auto; top: 200px; transition-property: background, border-radius; transition-duration: 1s; } .box:hover { background: red; border-radius: 50%; } ``` > 本文作者：不爱喝橙子汁