ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[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> ```