CSS过渡与动画

**CSS 过渡与动画**

CSS 过渡（Transition）和 CSS 动画（Animation）是两种常见的效果，用于在网页中实现视觉上的变化。它们可以使你的网页更加吸引人、现代化，并且能够更好地体现你的设计意图。

**CSS 过渡**

CSS 过渡是一种简单的效果，它允许你定义一个元素从一种状态到另一种状态的过渡过程。在这个过程中，元素会以一种平滑的方式改变其样式。例如，你可以使用 CSS 过渡来实现元素的大小、颜色或位置的变化。

###语法CSS 过渡的基本语法如下：

css元素 {
 /* 初始状态 */
 属性: 值;
 /* 过渡效果 */
 transition: 属性名 duration timing-function delay;
}

其中：

* `transition` 是一个属性，用于定义过渡效果。
* `属性名` 是你想要实现过渡的样式属性（例如 `background-color`、`width` 等）。
* `duration` 是过渡过程所需的时间长度（以秒或毫秒为单位）。
* `timing-function` 是一个函数，用于定义过渡效果的速度曲线（例如 `ease-in-out`、`linear` 等）。
* `delay` 是过渡开始前的延迟时间（以秒或毫秒为单位）。

### 示例下面是一个简单的例子：

css.box {
 width:100px;
 height:100px;
 background-color: #f0f0f0;
 transition: width2s ease-in-out, height2s ease-in-out;
}

.box:hover {
 width:200px;
 height:200px;
}

在这个例子中，`.box` 元素的宽度和高度会在鼠标悬浮时以一个平滑的过渡效果从 `100px` 变为 `200px`。

**CSS 动画**

CSS 动画是一种更复杂的效果，它允许你定义一个元素从一种状态到另一种状态的动画过程。在这个过程中，元素会以一种预定的速度和方式改变其样式。例如，你可以使用 CSS 动画来实现元素的旋转、缩放或移动。

###语法CSS 动画的基本语法如下：

css@keyframes 名称 {
 /* 动画关键帧 */
 from { 属性: 值; }
 to { 属性: 值; }
}

元素 {
 /* 初始状态 */
 属性: 值;
 /* 动画效果 */
 animation: 名称 duration timing-function delay;
}

其中：

* `@keyframes` 是一个关键帧定义，用于描述动画的每个阶段。
* `from` 和 `to` 是两个关键帧，分别代表动画开始和结束时的状态。
* `animation` 是一个属性，用于定义动画效果。
* `名称` 是你想要实现动画的名称（例如 `rotate`、`scale` 等）。
* `duration` 是动画过程所需的时间长度（以秒或毫秒为单位）。
* `timing-function` 是一个函数，用于定义动画效果的速度曲线（例如 `ease-in-out`、`linear` 等）。
* `delay` 是动画开始前的延迟时间（以秒或毫秒为单位）。

### 示例下面是一个简单的例子：

css@keyframes rotate {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

.box {
 width:100px;
 height:100px;
 background-color: #f0f0f0;
 animation: rotate2s ease-in-out;
}

在这个例子中，`.box` 元素会以一个平滑的动画效果从 `0deg` 旋转到 `360deg`。

**总结**

CSS 过渡和 CSS 动画是两种常见的效果，用于在网页中实现视觉上的变化。它们可以使你的网页更加吸引人、现代化，并且能够更好地体现你的设计意图。通过使用这些效果，你可以创造出独特的视觉效果并让你的网页更加立体。

**参考**

* [CSS 过渡]( />* [CSS 动画](