tutorials/css-animation-tutorial

CSS 动画教程

CSS 动画是网页设计中常用的技术之一，它可以让网页元素以平滑和有趣的方式动起来。以下是一些基本的 CSS 动画概念和示例。

基本概念

CSS3 动画：通过 CSS3 的 @keyframes 规则来定义动画。
过渡效果：通过改变 CSS 属性的值来创建平滑的动画效果。

示例

示例 1：简单的动画

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
}

示例 2：过渡效果

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

div:hover {
  width: 200px;
}

扩展阅读

想要了解更多关于 CSS 动画的技巧和高级用法，可以阅读本站的 CSS 动画高级教程。