CSS3动画：Transition和Animation属性介绍

CSS3为网页设计师提供了丰富的动画效果选项，其中最常用的是Transition（过渡）和Animation（动画）属性。这两个属性使得网页元素能够在不同状态之间平滑地过渡或者以指定的动画效果进行变换。本文将详细介绍Transition和Animation属性，并提供相应的源代码示例。

一、Transition（过渡）

Transition属性用于在网页元素从一种状态到另一种状态时提供平滑的过渡效果。它可以控制元素的属性值在一段时间内逐渐改变，从而实现过渡效果。Transition属性的基本语法如下：

transition: property duration timing-function delay;

• property：指定要过渡的CSS属性，例如"color"、“background-color"等。可以使用通配符”*"表示所有属性。
• duration：指定过渡的持续时间，单位可以是秒（s）或毫秒（ms）。
• timing-function：指定过渡的时间函数，用于控制过渡的速度曲线。常用的取值有"linear"（线性）、“ease”（缓入缓出）、“ease-in”（缓入）和"ease-out"（缓出）等。
• delay：指定过渡的延迟时间，单位可以是秒（s）或毫秒（ms）。

下面是一个例