CSS3 animation animation

CSS3 animation animation is a more powerful animation mechanism than transition in front-end development. If transition is "a simple transition from A to B", then animation is "a multi-stage animation that can control the entire process".

Let’s explain it clearly through the system 👇

🎬 1. What is `animation`?

CSS3 animation allows defining a series of style changes through keyframes (@keyframes), The browser will Automatically calculate in-between frames , thereby achieving smooth animation.

✅ Simple to understand: transition can only go from state A → state B, And animation can define A → B → C → D... multi-stage animation.

🧩 2. Basic grammar

1️⃣ Define animation (@keyframes)

css

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

2️⃣ Use animation (animation attribute)

css

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

🧱 3. Basic Example

html

<div class="box"></div>

css

.box {
  width: 100px;
  height: 100px;
  background: #42b983;
  animation: move 2s ease-in-out infinite alternate;
}

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

✅ Effect: The box moves back and forth from side to side, in an eternal cycle.

🧠 4. Eight attributes of `animation`

Properties	Function	Example
`animation-name`	Animation name (corresponding to `@keyframes`)	`move`
`animation-duration`	duration	`2s`, `500ms`
`animation-timing-function`	Speed curve	`ease`, `linear`, `ease-in-out`
`animation-delay`	Delay time	`1s`
`animation-iteration-count`	Number of plays	`infinite` / `1` / `3`
`animation-direction`	Playback direction	`normal` / `reverse` / `alternate` / `alternate-reverse`
`animation-fill-mode`	The state after the animation ends	`none` / `forwards` / `backwards` / `both`
`animation-play-state`	Control play or pause	`running` / `paused`

🔹 Example: complete writing method

css

.box {
  animation: move 3s linear 1s 2 alternate forwards;
}

Equivalent to 👇

css

.box {
  animation-name: move;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

🌀 5. Keyframe definition method

✅ Percent writing method (recommended)

css

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(150px); background: orange; }
  100% { transform: translateX(300px); background: red; }
}

✅ from / to abbreviation

css

@keyframes move {
  from { opacity: 0; }
  to { opacity: 1; }
}

⚙️ 6. Detailed explanation of animation direction (`animation-direction`)

Value	Description	Example
`normal`	Play forward (default)	0% → 100%
`reverse`	Reverse playback	100% → 0%
`alternate`	forward → reverse alternation	back and forth movement
`alternate-reverse`	Reverse → Forward alternation	Back and forth movement (starting from the end point)

🧭 7. Animation end state (`animation-fill-mode`)

value	description	effect
`none`	Return to the initial state after the animation ends	Default
`forwards`	Stay in the end frame state	Often used to maintain the final style after loading is completed
`backwards`	Applies initial frame before animation starts	Used in conjunction with `delay`
`both`	Apply forwards + backwards at the same time	Valid for both entry and exit

💡 8. Animation control (`animation-play-state`)

css

.box:hover {
  animation-play-state: paused; /* 鼠标悬停暂停 */
}

🎨 9. Multiple animations executed simultaneously

css

animation:
  move 2s linear infinite,
  fade 3s ease-in-out 1s infinite alternate;

📌 Separate multiple animations with commas.

🧰 10. Common animation cases

✅ 1. Fade in/out

css

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fade 1s ease-in forwards;
}

✅ 2. Bounce animation (bounce)

css

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}
.ball {
  animation: bounce 0.6s ease infinite;
}

✅ 3. Rotate animation (rotate)

css

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spin {
  animation: rotate 1.5s linear infinite;
}

⚡ 11. Performance optimization suggestions

Suggestions	Reasons
✅ Using `transform` and `opacity` animations	Does not trigger layout reflow (high performance)
❌ Avoid animation `width` / `top` / `left`	will trigger layout (slow)
✅ Use `will-change` to optimize in advance	Notify the browser to prepare the animation layer in advance
✅ Control the number of animations	Avoid occupying the GPU for a long time

Example:

css

.element {
  will-change: transform, opacity;
}

⚖️ 12. Comparison and summary with `transition`

Comparison items	`transition`	`animation`
Trigger method	Status change (such as hover)	Can play automatically
Controllability	Only start and end can be defined	Multiple keyframes can be defined
Repeat play	Not supported	Support loop play
Delay and pause	Can be delayed but not paused	Can be delayed, paused, and controlled playback
Application scenarios	Simple transition	Complex continuous animation

🧭 13. Structured summary (mind map version)

CSS3 Animation（动画）
 ├── 定义：基于关键帧的多阶段动画
 ├── 语法
 │   ├── @keyframes 动画名 { 0%~100% 样式 }
 │   └── animation: name duration timing delay count direction fill state;
 ├── 八大属性
 │   ├── animation-name
 │   ├── animation-duration
 │   ├── animation-timing-function
 │   ├── animation-delay
 │   ├── animation-iteration-count
 │   ├── animation-direction
 │   ├── animation-fill-mode
 │   └── animation-play-state
 ├── 关键帧写法
 │   ├── 百分比写法
 │   └── from/to 简写
 ├── 常见方向
 │   ├── normal / reverse / alternate / alternate-reverse
 ├── 应用场景
 │   ├── 淡入淡出
 │   ├── 弹跳
 │   ├── 旋转
 │   └── 进场/出场动效
 ├── 优化建议
 │   ├── transform / opacity 优先
 │   ├── will-change 提前优化
 │   └── 避免 layout 属性动画
 └── 与 transition 对比
     ├── transition：简单状态过渡
     └── animation：复杂可控动画

You can use the F12 developer tool to view elements and styles, and open codepen to edit code online.

::: demo [vanilla]

html

<html>
  <div class="animationBox">
    <div class="rotate">旋转动画1</div>
    <div class="play">
      <div class="img">旋转动画2</div>
      <span><p class="p2"></p></span>
      <span><p></p></span>
      <span><p></p></span>
      <span><p class="p2"></p></span>
    </div>
    <div class="elasticity">弹性动画</div>
    <div class="elasticity2">曲线弹性</div>
  </div>
</html>

<style>
  .animationBox{overflow: hidden;}
  .animationBox>div{
    width: 100px;height: 100px;background: #eee;border-radius: 50%;text-align: center;line-height: 100px;margin: 30px;float:left;
  }
  .rotate{
    animation: rotate 5s linear infinite
  }
  .rotate:hover{ animation-play-state: paused}
  @keyframes rotate {
    0%{transform: rotate(0);}
  100%{transform: rotate(360deg);}
  }
  .animationBox>.play {
    position: relative;
    margin: 50px 30px;
    background:none;
  }
  .play .img{
    position: absolute;
    top: 0;
    left:0;
    z-index: 1;
    width: 100px;height: 100px; background: #eee;
    border-radius: 50%;

    animation: rotate 5s linear infinite
  }
  .play span {
    position: absolute;
    top: 1px;
    left:1px;
    z-index: 0;
    display: block;
    width: 96px;
    height: 96px;
    border: 1px solid #999;
    border-radius: 50%;
  }
  .play span p{display: block;width: 4px;height: 4px;background: #000;margin: -2px 0 0 50%;border-radius: 50%;opacity: 0.5;}
  .play span .p2{margin: 50% 0 0 -2px;}
  .play span{
    animation: wave 5s linear infinite
  }
  .play>span:nth-child(3){
    /* 延迟时间 */
    animation-delay:1s; 
  }
  .play>span:nth-child(4){
    animation-delay:2.2s;
  }
  .play>span:nth-child(5){
    animation-delay:3.8s;
  }
  
  @keyframes wave {
    0%
    {
      transform:scale(1) rotate(360deg);
      opacity: 0.8;
    }
  100%
    {
      transform:scale(1.8) rotate(0deg);
      opacity: 0;
    }
  }

  .elasticity{
    /* 参数说明
      动画名称 花费时间 贝塞尔曲线 延迟开始时间 播放次数n|infinite  是否反向播放动画
    */
    animation: elasticity 1s linear 2s infinite
  }
  
  @keyframes elasticity{
    0%{
      transform: scale(0);
    }
    60%{
      transform: scale(1.1);
    }
    90%{
      transform: scale(1);
    }
  }
  

  .elasticity2{
    /**
    贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

    通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等
    X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大
    直线：linear，即cubic-bezier(0,0,1,1)

    贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67
      */
    animation: elasticity2 1s cubic-bezier(.39,.62,.74,1.39) 2s infinite
  }
  @keyframes elasticity2{
    0%{
      transform: scale(0);
    }
    90%{
      transform: scale(1);
    }
  }
</style>

:::

Bezier curve cubic-bezier(x1,y1,x2,y2)

By adjusting the Bezier curve, you can set up a variety of animation effects, such as rebound effects. The range of the X-axis is 0~1. The value of the Y-axis is not specified, but it should not be too large.For example: straight line linear, namely cubic-bezier(0,0,1,1)

Bezier curve online tool: https://cubic-bezier.com/#.17,.67,.83,.67

Reference: https://www.w3school.com.cn/css3/index.asp

CSS3 animation animation ​

🎬 1. What is animation? ​

🧩 2. Basic grammar ​

1️⃣ Define animation (@keyframes) ​

2️⃣ Use animation (animation attribute) ​

🧱 3. Basic Example ​

🧠 4. Eight attributes of animation ​

🔹 Example: complete writing method ​

🌀 5. Keyframe definition method ​

✅ Percent writing method (recommended) ​

✅ from / to abbreviation ​

⚙️ 6. Detailed explanation of animation direction (animation-direction) ​

🧭 7. Animation end state (animation-fill-mode) ​

💡 8. Animation control (animation-play-state) ​

🎨 9. Multiple animations executed simultaneously ​

🧰 10. Common animation cases ​

✅ 1. Fade in/out ​

✅ 2. Bounce animation (bounce) ​

✅ 3. Rotate animation (rotate) ​

⚡ 11. Performance optimization suggestions ​

⚖️ 12. Comparison and summary with transition ​

🧭 13. Structured summary (mind map version) ​

Bezier curve cubic-bezier(x1,y1,x2,y2) ​