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

前端知识速记–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倍。

动画总结表