CSS3过渡与动画实战：transition和animation详解

本文将详细介绍CSS3中的transition和animation用法，并通过实例进行解析。 CSS3的`transition`属性允许我们平滑地过渡一个元素在不同状态间的变化，这些状态通常由伪类如`:hover`、`:active`或通过JavaScript动态设定。此属性自IE10开始被支持。`transition`的初始值包括`transition-delay`为0秒，`transition-duration`为0秒，`transition-property`为所有属性，以及`transition-timing-function`为ease。其基本语法为： ```css div { transition: <property> <duration> <timing-function> <delay>; } ``` `<property>`指明要应用过渡效果的CSS属性，可以是单一属性，也可以是`all`表示所有属性。`<duration>`定义过渡持续的时间，单位通常是秒(s)或毫秒(ms)。`<timing-function>`设置过渡的速度曲线，例如`ease`、`linear`、`ease-in`等。`<delay>`定义过渡开始前的延迟时间。 在JavaScript中，我们可以监听`transitionend`或`webkitTransitionEnd`事件来检测过渡是否结束： ```javascript el.addEventListener("transitionend", updateTransition, true); // 在Webkit浏览器中 el.addEventListener("webkitTransitionEnd", updateTransition, true); ``` 以下是一些`transition`的实例： 1. 淡入淡出效果（Demo1: FadeBlock）：当鼠标悬停在元素上时，元素的透明度逐渐改变。 2. 移动效果：通过改变元素的`margin`，实现鼠标悬停时元素的位置平滑移动。 3. 弹跳效果：通过改变元素的`transform`属性，使元素在鼠标悬停时上下弹跳。 4. 旋转效果：鼠标悬停时，元素沿某个轴线旋转。 5. 手风琴效果：点击链接，相关内容区域以过渡效果展开或收起。 另一方面，`animation`属性则允许我们创建更复杂的动画序列，包括关键帧(`@keyframes`)的定义，以及如何重复和控制动画。`animation`属性结合了`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode`等多个子属性。 举个例子，创建一个简单的动画： ```css @keyframes myAnimation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } div { animation: myAnimation 2s linear infinite; } ``` 在这个例子中，`@keyframes`定义了一个名为`myAnimation`的动画，它从0%（开始时）到100%（结束时）让元素顺时针旋转360度。`animation`属性应用于`div`，使得动画持续2秒，速度线性，且无限次重复播放。 CSS3的`transition`和`animation`提供了强大的视觉效果和用户体验，开发者可以根据需求创造出丰富多样的动态效果。