css3动画菜鸟：CSS3动画入门指南，从菜鸟到高手的简单教程

来源：网络作者：日期：2025-10-29 06:36:51

什么是CSS3动画？

CSS3动画是通过CSS代码实现元素的动态效果,比如淡入淡出、滑动、缩放等，与传统JavaScript动画相比，CSS3动画更加轻量级，性能更好，且代码更简洁。

基础语法

CSS3动画的核心是@keyframes规则和animation属性。

`@keyframes`规则

@keyframes用于定义动画的各个阶段（关键帧）。

@keyframes example {
  0% { /* 动画开始状态 */ }
  50% { /* 动画中间状态 */ }
  100% { /* 动画结束状态 */ }
}

`animation`属性

animation属性用于将动画应用于元素。

/* 应用动画 */
.your-element {
  animation-name: example;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

关键属性详解

`animation-duration`

定义动画的持续时间,默认值为0s。

/* 动画持续2秒 */
animation-duration: 2s;

`animation-timing-function`

定义动画的速度曲线,常用值有linear（匀速）、ease（默认，先快后慢）、ease-in-out（先慢后快）等。

css3动画菜鸟：CSS3动画入门指南，从菜鸟到高手的简单教程

/* 动画以匀速执行 */
animation-timing-function: linear;

`animation-delay`

定义动画开始前的延迟时间。

/* 动画延迟1秒开始 */
animation-delay: 1s;

`animation-iteration-count`

定义动画的播放次数,可以是数字或infinite（无限循环）。

/* 动画无限循环 */
animation-iteration-count: infinite;

`animation-direction`

定义动画的播放方向,常用值有alternate（反向播放）、reverse（反向播放）等。

/* 动画反向播放 */
animation-direction: reverse;

实战示例：创建一个简单的弹跳动画

下面是一个简单的弹跳动画示例,点击按钮时，方块会从底部弹起。

css3动画菜鸟：CSS3动画入门指南，从菜鸟到高手的简单教程

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      bottom: 0;
    }
    .bounce {
      animation-name: bounce;
      animation-duration: 1s;
      animation-timing-function: ease-out;
    }
    @keyframes bounce {
      0% { bottom: 0; }
      50% { bottom: 20px; }
      100% { bottom: 0; }
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <button onclick="animate()">点击弹跳</button>
  <script>
    function animate() {
      const box = document.querySelector('.box');
      box.classList.remove('bounce');
      setTimeout(() => {
        box.classList.add('bounce');
      }, 100);
    }
  </script>
</body>
</html>

进阶技巧

使用`transform`属性

transform属性可以实现平滑的动画效果，且不会影响页面布局。

/* 缩放动画 */
transform: scale(1.5);

结合`transition`属性

transition属性可以实现元素状态变化时的平滑过渡。

/* 悬停时平滑过渡 */
transition: transform 0.5s ease;

使用`@keyframes`创建复杂动画

通过多个关键帧,可以创建复杂的动画效果。

@keyframes complex {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

CSS3动画是前端开发中不可或缺的一部分,通过本文，你应该已经掌握了CSS3动画的基础知识和一些实用技巧，从简单的弹跳动画到复杂的过渡效果，CSS3为你提供了丰富的工具，继续练习，你会发现动画的世界远比想象中更有趣！