当前位置：首页 > news >正文

前端知识速记--css篇：CSS3中的常见动画及实现方式

news 来源：原创 2025/5/16 5:31:20

前端知识速记–css篇：CSS3中的常见动画及实现方式

常见的CSS3动画

1. 过渡 (Transitions)

过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。

语法格式：

transition: property duration timing-function delay;

property：指定要过渡的CSS属性，例如 background-color。
duration：过渡的持续时间，例如 0.5s。
timing-function：过渡的速度曲线，例如 ease。
delay（可选）：延迟时间，例如 0.2s。

实现示例：

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: red;
}

分析：当用户将鼠标悬停在 .box 元素上时，背景颜色会在0.5秒内从蓝色平滑过渡到红色。

2. 关键帧动画 (Keyframe Animations)

关键帧动画允许开发者定义动画的多个状态，可以创建复杂的动画效果。

语法格式：

@keyframes animation-name {
  from { /* 关键帧样式 */ }
  to { /* 关键帧样式 */ }
  
  /* 或者使用百分比 */
  0% { /* 关键帧样式 */ }
  50% { /* 关键帧样式 */ }
  100% { /* 关键帧样式 */ }
}

.animation-class {
  animation: animation-name duration timing-function iteration-count direction;
}

animation-name：动画名称。
duration：动画的持续时间，例如 1s。
timing-function：动画的速度曲线，例如 infinite（无限循环）。
iteration-count：迭代次数，例如 infinite。
direction：动画方向，例如 alternate。

实现示例：

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

.box {
  animation: example 1s infinite;
}

分析：这个示例中，.box 元素向上移动20像素后再回到原位，整个动画持续1秒，并且会无限循环。

3. 动画延迟和方向

CSS3动画支持延迟和方向控制，可以为动画提供更多个性化效果。

语法格式：

.animation-class {
  animation-delay: time;
  animation-direction: direction;
}

time：延迟时间，例如 0.5s。
direction：动画方向，例如 normal（正常）、reverse（反向）、alternate（交替）。

实现示例：

.box {
  animation: example 1s infinite alternate;
  animation-delay: 0.5s;
}

分析：此示例使用 alternate，使得动画在完成一个周期后反向执行，并且使用 animation-delay 延迟0.5秒开始。

4. 缩放和旋转

通过 CSS3 的 transform 属性，可以对元素进行缩放和旋转。

语法格式：

transform: scale(sx, sy);
transform: rotate(deg);

sx 和 sy：分别表示在 X 轴和 Y 轴上的缩放倍数。
deg：旋转角度。

实现示例：

.box {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.box:hover {
  transform: scale(1.2);
}

分析：当元素被悬停时，它会在0.3秒内逐渐放大至1.2倍。

动画总结表

动画类型	特性	语法格式	示例代码
过渡 (Transitions)	简单状态变更，平滑过渡	`transition: property duration timing-function delay;`	`.box:hover { background-color: red; }`
关键帧动画 (Keyframes)	定义多个动画状态，复杂效果	`@keyframes name { ... }` `animation: name duration;`	`@keyframes example { ... }` `.box { animation: example 1s infinite; }`
动画延迟与方向	支持延迟和反向执行	`animation-delay: time;` `animation-direction: direction;`	`.box { animation: example 1s infinite alternate; }`
缩放和旋转	对元素进行缩放和旋转	`transform: scale(sx, sy);` `transform: rotate(deg);`	`.box:hover { transform: scale(1.2); }`