2、CSS的 动画和过渡

大波浪
300 阅读3分钟

CSS 动画（Animation）

定义和使用

动画允许你在一段时间内平滑地改变元素的样式。具体实现步骤如下：

  1. 定义关键帧（@keyframes） ：描述动画的各个阶段和状态。
  2. 应用动画属性：将定义好的动画应用到元素上，并设置其相关属性。

关键帧（@keyframes）

关键帧用于定义动画的不同阶段和对应的样式。可以使用百分比表示时间，也可以使用关键字 from 和 to 来替代0%和100%。

示例：

/* 定义一个名为 move 的关键帧 */
@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

动画属性

animation-name

指定应用的关键帧动画名。

animation-name: move;

animation-duration

定义动画完成一个周期所需的时间，单位可以是 s（秒）或 ms（毫秒）。

animation-duration: 2s;

animation-timing-function

定义动画的速度曲线。常见值包括 linear（线性），ease（缓动），ease-in，ease-out，和 ease-in-out。

animation-timing-function: ease-in-out;

animation-delay

设置动画开始前的等待时间。

animation-delay: 1s;

animation-iteration-count

设置动画播放的次数，常见值包括数字（1, 2, 3, ...），或 infinite（无限次）。

animation-iteration-count: infinite;

animation-direction

定义动画执行的方向。当值是 alternate 或 alternate-reverse 时，动画会在每一个周期的开始时反向播放。

animation-direction: alternate;

animation-fill-mode

定义在动画执行之前和之后如何应用样式。常见值有 none，forwards，backwards，和 both。

animation-fill-mode: forwards;

animation-play-state

控制动画的播放状态。常见值有 running（播放）和 paused（暂停）。

animation-play-state: paused;

举例

综合应用上述属性创建一个复杂动画：

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

.element {
  animation-name: bounce;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

CSS 过渡（Transition）

定义和使用

过渡用于在两种不同的样式之间实现平滑过渡效果。通常用于响应用户的交互行为（如悬停、聚焦、点击等），不需要关键帧定义。

过渡属性

transition-property

指定要应用过渡效果的 CSS 属性。

transition-property: transform;

transition-duration

定义过渡完成所需的时间，单位可以是 s（秒）或 ms（毫秒）。

transition-duration: 0.5s;

transition-timing-function

定义过渡的速度曲线，常见值包括 linear（线性），ease（缓动），ease-in，ease-out，和 ease-in-out。

transition-timing-function: ease-in-out;

transition-delay

设置过渡开始前的等待时间。

transition-delay: 0s;

举例

通过过渡实现元素在悬停时滑动效果的示例：

.element {
  transition: transform 0.5s ease-in-out;
}

.element:hover {
  transform: translateX(100px);
}

过渡的快捷写法

可以将过渡属性合并在一起使用：

transition: property duration timing-function delay;

示例：

.element {
  transition: transform 0.5s ease-in-out 0s;
}

多属性过渡

同时对多个属性应用过渡效果：

.element {
  transition: transform 0.5s ease-in-out, opacity 0.3s ease;
}

.element:hover {
  transform: translateX(100px);
  opacity: 0.5;
}

使用建议和最佳实践

  1. 性能优化：

    • 使用 will-change 提示浏览器优化动画处理，避免性能瓶颈。
    .element {
  will-change: transform;
}
    • 动画和过渡尽量使用 GPU 加速的属性（如 transform 和 opacity），避免使用 top、left 等可能引发重排的属性。

  2. 用户体验：

    • 动画和过渡的时间和曲线应设置合理，使效果自然，不要过于突兀或缓慢。
    • 注意动画和过渡对可访问性的影响，例如提供可选的设置来禁用动画。

  3. 减少动画和过渡使用：

    • 虽然动画和过渡能提高用户体验，但过度使用会反而降低体验，应该在必要时使用。

通过合理利用 CSS 动画和过渡，可以为网页带来更生动和直观的交互体验，使用户体验更加愉悦。

avatar
文章
阅读
粉丝