education/tutorials/css-animation-tutorial

CSS 动画教程

CSS 动画是一种非常强大的工具，可以让我们在不使用 JavaScript 的情况下，给网页添加丰富的动态效果。本教程将带你从基础到进阶，掌握 CSS 动画的制作方法。

基础概念

• 过渡 (Transition): 用于实现元素状态的变化，如宽高、背景颜色、透明度等。
• 动画 (Animation): 可以通过关键帧 (Keyframes) 实现复杂的动画效果。
• 关键帧: 定义动画的起始和结束状态，以及动画过程中的一些关键点。

基础语法

/* 过渡 */
element {
  transition: property duration ease;
}

/* 动画 */
@keyframes name {
  from {
    /* 起始状态 */
  }
  to {
    /* 结束状态 */
  }
}

element {
  animation: name duration ease infinite;
}

实例

假设我们要实现一个简单的按钮点击后变大的效果：

button {
  transition: transform 0.5s ease;
}

button:active {
  transform: scale(1.2);
}

扩展阅读

• CSS 动画教程
• CSS 过渡和动画指南

图片