CSS 动画

网站

CSS animation 属性

animation - CSS | MDN

引入

CSS 动画用于让元素在一段时间内持续变化。

它适合做加载效果、提示出现、图标动效、页面进入动画等，不需要每次都用 JavaScript 控制。

正文

定义

定义

CSS 动画通常由 @keyframes 和 animation 组成，@keyframes 定义动画过程，animation 把动画应用到元素上。

简单理解：先写“动画怎么变”，再写“哪个元素使用这个动画”。

语法

@keyframes 动画名 {
  from {
    属性: 属性值;
  }
 
  to {
    属性: 属性值;
  }
}
 
.box {
  animation: 动画名 持续时间 速度曲线;
}

例如：

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

这个例子会让 .notice 从透明慢慢变成可见。

@keyframes

@keyframes 用来定义动画的关键帧。

@keyframes move-right {
  from {
    transform: translateX(0);
  }
 
  to {
    transform: translateX(100px);
  }
}

from 表示开始状态，to 表示结束状态。

也可以使用百分比控制更细的过程。

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
 
  50% {
    transform: translateY(-20px);
  }
 
  100% {
    transform: translateY(0);
  }
}

常见属性

属性	作用
animation-name	动画名称
animation-duration	动画持续时间
animation-timing-function	动画速度曲线
animation-delay	动画延迟时间
animation-iteration-count	动画播放次数
animation-direction	动画播放方向
animation-fill-mode	动画开始前和结束后的状态
animation	动画简写属性

简写写法

.box {
  animation: fade-in 0.5s ease 0s 1 normal forwards;
}

常见顺序可以理解为：

animation: 名称 持续时间 速度曲线 延迟 播放次数 方向 填充模式;

实际写笔记或项目时，不一定每一项都写。

.box {
  animation: fade-in 0.5s ease;
}

例子

淡入提示框

<div class="notice">保存成功</div>

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
 
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
.notice {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #dcfce7;
  color: #166534;
  animation: fade-in 0.3s ease;
}

这个例子会让提示框轻微上移并淡入。

加载动画

<div class="loader"></div>

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
 
.loader {
  width: 32px;
  height: 32px;
  border: 4px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

infinite 表示动画无限循环。

特点

• @keyframes 定义动画过程
• animation 把动画应用到元素上
• 动画可以自动播放，不一定需要用户触发
• animation-iteration-count: infinite; 可以无限循环
• 常用 opacity 和 transform 做动画，效果更自然
• 动画不要太多，否则容易分散注意力，也可能影响性能

理解

CSS 动画可以理解为给元素安排一段“动作过程”。

@keyframes 像剧本，说明元素从哪里变到哪里；animation 像执行命令，让元素照着剧本动起来。

普通页面里动画不用复杂，轻微、短时间、能帮助理解页面状态就够了。

引出

理解 CSS 动画之后，可以继续学习 CSS 过渡，它更适合处理鼠标悬停、聚焦等简单状态变化。