编程马·菜鸟教程

Appearance

动画效果（animation，实现复杂动态效果） ​

21.1 动画的定义 ​

核心概念 ​

CSS动画是通过定义关键帧（@keyframes）和使用动画属性来实现的复杂动态效果。

基本组成 ​

  1. 关键帧（@keyframes）：定义动画的开始和结束状态，以及中间过程
  2. 动画属性：控制动画的执行方式

21.2 关键帧（@keyframes） ​

语法 ​

css
@keyframes 动画名称 {
  0% {
    /* 初始状态 */
  }
  50% {
    /* 中间状态 */
  }
  100% {
    /* 结束状态 */
  }
}

示例 ​

css
/* 旋转动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 淡入淡出动画 */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 弹跳动画 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

21.3 动画属性 ​

核心动画属性 ​

属性描述示例值
animation-name动画名称rotate, fadeIn
animation-duration动画持续时间1s, 500ms
animation-timing-function动画速度曲线ease, linear, ease-in-out
animation-delay动画延迟时间0s, 0.5s
animation-iteration-count动画重复次数1, infinite
animation-direction动画方向normal, reverse, alternate
animation-fill-mode动画结束后的状态forwards, backwards, both
animation-play-state动画播放状态running, paused

语法 ​

css
元素 {
  animation-name: rotate;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

动画简写 ​

css
元素 {
  animation: 动画名称 持续时间 速度曲线 延迟时间 重复次数 方向 填充模式 播放状态;
}

示例 ​

css
/* 简写形式 */
.spinner {
  animation: rotate 2s linear infinite;
}

/* 等价于 */
.spinner {
  animation-name: rotate;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

21.4 常用动画效果 ​

旋转动画 ​

css
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating-element {
  animation: rotate 3s linear infinite;
}

平移动画 ​

css
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.sliding-element {
  animation: slideIn 1s ease-out forwards;
}

缩放动画 ​

css
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.pulsing-element {
  animation: pulse 2s ease-in-out infinite;
}

淡入淡出动画 ​

css
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.fading-element {
  animation: fadeInOut 3s ease-in-out infinite;
}

21.5 新手简化：常用动画代码模板 ​

模板1：无限旋转 ​

css
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 2s linear infinite;
}

模板2：淡入 ​

css
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}

模板3：弹跳 ​

css
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  animation: bounce 1s ease infinite;
}

21.6 实战：制作旋转图标、淡入淡出提示框、滚动动画 ​

实战目标 ​

创建旋转图标、淡入淡出提示框和滚动动画效果。

实战步骤 ​

  1. 创建HTML文件：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS动画效果实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS动画效果实战</h1>
    
    <!-- 旋转图标 -->
    <section class="demo-section">
      <h2>旋转图标</h2>
      <div class="spinner"></div>
      <p>这是一个无限旋转的加载图标</p>
    </section>
    
    <!-- 淡入淡出提示框 -->
    <section class="demo-section">
      <h2>淡入淡出提示框</h2>
      <div class="notification">操作成功！</div>
    </section>
    
    <!-- 滚动动画 -->
    <section class="demo-section">
      <h2>滚动动画</h2>
      <div class="scroll-container">
        <div class="scroll-item">项目1</div>
        <div class="scroll-item">项目2</div>
        <div class="scroll-item">项目3</div>
        <div class="scroll-item">项目4</div>
        <div class="scroll-item">项目5</div>
      </div>
    </section>
  </div>
</body>
</html>
  1. 添加CSS样式：
css
/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 50px 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 40px;
}

.demo-section {
  margin-bottom: 40px;
  padding: 30px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.demo-section h2 {
  color: #555;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
}

/* 旋转图标 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

/* 淡入淡出提示框 */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  10%, 90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.notification {
  background-color: #2ecc71;
  color: white;
  padding: 15px 30px;
  border-radius: 25px;
  display: inline-block;
  animation: fadeInOut 3s ease-in-out infinite;
}

/* 滚动动画 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.scroll-container {
  display: flex;
  width: 200%;
  animation: scroll 10s linear infinite;
  gap: 20px;
  padding: 20px 0;
}

.scroll-item {
  flex: 0 0 calc(20% - 16px);
  background-color: #3498db;
  color: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
}

.scroll-container:hover {
  animation-play-state: paused;
}
  1. 运行页面：在浏览器中打开文件，观察效果

预期效果 ​

  • 旋转图标：一个无限旋转的加载图标
  • 淡入淡出提示框：一个会自动淡入淡出的通知提示框
  • 滚动动画：一个自动水平滚动的项目列表，鼠标悬停时会暂停

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建