[TOC] > [MDN 参考](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) > [在线 贝塞尔曲线](https://cubic-bezier.com/#0,-0.55,.91,.65) ## transition **transition的使用注意** 1. 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。 2. 不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。 3. transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。 **transition的局限** transition的优点在于简单易用，但是它有几个很大的局限。 1. transition需要事件触发，**所以没法在网页加载时自动发生**。 2. transition是一次性的，不能重复发生，除非一再触发。 3. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 4. 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 CSS Animation就是为了解决这些问题而提出的。 --- 比如在不同的伪元素之间切换，像是 `:hover`，`:active` 或者通过 JavaScript 实现的状态变化 语法 ``` /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* Apply to 2 properties */ transition: margin-right 4s, color 1s; /* Apply to all changed properties */ transition: all 0.5s ease-out; ``` timing function ``` transition-timing-function: ease transition-timing-function: ease-in #缓入 transition-timing-function: ease-out #缓出 transition-timing-function: ease-in-out #缓入缓出 transition-timing-function: linear # 线性 transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) # 贝塞尔曲线 transition-timing-function: step-start transition-timing-function: step-end transition-timing-function: steps(4, end) #分四段执行 ``` ## 示例 ``` <style> #demo{ height: 100px; width: 100px; transition: all 2s linear; background-color: #0a2b1d; } #demo:hover{ height: 200px; width: 200px; background-color: #009797; } </style> <div id="demo"> </div> ```