css3教程7-过渡动画_什么条件触发transition

一.知识点

transition的概述

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

过渡动画触发的条件

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

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

transition的属性和属性值写法

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

transition过渡属性

transition-property：过渡属性。

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

transition:all 2s linear 0s;
1

过渡动画的总时间

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

过滤动画速率

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

---

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

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

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

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

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

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