css3教程7-过渡动画

一.知识点

transition的概述

transition：过渡动画，它是一个复合属性，由多个属性组成。

过渡动画触发的条件

①事件触发：过渡动画需要有事件触发，例如鼠标移上去的事件（hover）。

②属性值变化：参与过渡动画的元素，某一些样式务必要发生变化。

transition的属性和属性值写法

transition：过渡动画的属性 过渡动画的总时间 过滤动画速率 过滤动画延迟时间;

transition过渡属性

transition-property：过渡属性。

all代表元素的所有属性，例如，如下的代码：

transition:all 2s linear 0s;

过渡动画的总时间

transition-duration：过渡动画的总时间。

过滤动画速率

transition-timing-function:过滤动画速率。

---

过渡动画的速率的属性值有6个：

①常用的匀速linear：线性的。

②ease-in：ease是缓慢，in是进入，规定是以慢速开始过渡动画。

③ease-out：ease是缓慢，out是出去，规定是以慢速结果过渡动画。

④ease：规定是以慢速开始、慢速结果过渡动画。

⑤ease-in-out：规定是以慢速开始、慢速结果过渡动画。

⑥cubic-bezier(0.24, 0.74, 0, 0.9)：贝塞尔曲线。

调整曲线

过滤动画延迟时间

transition-delay:过滤动画延迟时间。

[ 单位：s（秒 ） || ms（毫秒）]

多个属性值的写法

 transition:width 2s linear 0s,
            height 2s linear 0s;

总结：如果在transition里需要写多个属性值的时候，可以用逗号隔开，但是，不推荐这么写，因为有更简