CSS 过渡与动画教程

在网页设计中，CSS 过渡和动画可以使页面更加生动和用户友好。本教程将带您了解如何使用 CSS 实现基本的过渡和动画效果。

基础概念

过渡（Transitions）

过渡允许我们以平滑的方式改变元素的样式。当元素的状态发生变化时，过渡可以自动触发。

动画（Animations）

动画可以创建更加复杂和连续的视觉效果。它允许我们自定义元素在一段时间内的样式变化。

实现过渡

要实现一个简单的过渡效果，我们可以使用以下代码：

.element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.5s ease;
}

.element:hover {
  width: 200px;
}

在上面的例子中，当鼠标悬停在 .element 元素上时，它的宽度会从 100px 平滑过渡到 200px。

实现动画

CSS 动画可以通过 @keyframes 规则实现。以下是一个简单的例子：

@keyframes example {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}

.element {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s infinite;
}

在上面的例子中，.element 元素会从原始大小逐渐放大到两倍大小，这个过程会无限重复。

扩展阅读

想要了解更多关于 CSS 过渡和动画的知识，可以参考以下资源：

• CSS 过渡教程
• CSS 动画教程

CSS 过渡示例