# 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%; } ``` > 本文作者：不愛喝橙子汁