CSS animation - 让元素彻底消失

最浅显易懂的 CSS 之 animation - 06：让元素彻底消失

作为一名技术博客创作专家，我喜欢以一种不同寻常的方式看待事物，并以此为基础来构建我的文章。今天，让我们探究一下 CSS animation 的神奇世界，特别是如何让元素从视野中彻底消失。

animation-fill-mode：擦除元素存在的痕迹

在前面几期文章中，我们探讨了 animation-name、animation-duration 和 animation-timing-function 等属性。今天，我们将深入研究 animation-fill-mode，这是一个鲜为人知的属性，却能带来惊人的效果。

animation-fill-mode 决定了动画结束后元素的状态。默认情况下，元素将在动画结束后返回其初始状态。但是，我们可以使用 animation-fill-mode: forwards; 来改变这种行为，让元素保持动画结束时的状态。

消失无踪：让元素凭空蒸发

现在，让我们利用 animation-fill-mode 来让元素消失无踪。为此，我们将使用 CSS animation 将元素的透明度从 1（完全可见）逐渐变为 0（完全透明）。

.disappear {
  animation: fade-out 1s forwards;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

当这个动画应用到元素上时，元素将逐渐淡出，最终消失在页面中。animation-fill-mode: forwards; 确保元素在动画结束后保持透明，从而实现消失的效果。

渐隐渐出：优雅地隐藏和显示元素

除了消失之外，animation-fill-mode 还可以用来渐隐渐出元素。通过将 animation-fill-mode 设置为 both，我们可以让元素在动画开始时和结束时都保持其最终状态。

.fade-in-out {
  animation: fade-in-out 1s both;
}

@keyframes fade-in-out {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

使用这个动画，元素将从透明状态逐渐淡入，达到完全可见。然后，它将在动画结束后保持完全可见，直到再次触发动画。

创造视觉冲击：消失与重现的循环

通过结合动画和 animation-fill-mode，我们可以创造出令人惊叹的视觉效果。例如，我们可以让一个元素从视图中消失，然后再突然重现。

.blink {
  animation: blink 2s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

这个动画让元素交替消失和重现，营造出一种引人注目的闪烁效果。

结论

CSS animation 远不止淡入淡出和移动。通过 animation-fill-mode 的强大功能，我们可以让元素从视图中彻底消失，创造出令人惊叹的视觉效果，从而提升网站和应用程序的用户体验。从渐隐渐出到消失重现，可能性无穷无尽。