CSS 动画教程

CSS 动画允许您通过添加一些简单的代码，使网页元素产生动态效果。以下是一些关于 CSS 动画的入门教程。

基本概念

CSS 动画主要基于 CSS 的 @keyframes 规则，它允许您定义动画的每一帧。

  • @keyframes：定义动画的关键帧。
  • animation：应用动画到元素上。

示例

假设我们要让一个方块沿着 X 轴移动，可以使用以下代码：

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s linear infinite;
}

资源链接

想要了解更多关于 CSS 动画的细节，可以阅读CSS 动画详细教程。

图片展示

CSS 动画示例