css向上淡入淡出

CSS中的动画效果犹如乐队的伴奏，它能让页面元素更加生动有趣。在这篇文章中，我们将介绍如何使用CSS实现向上淡入淡出的动画效果。

.fade-in-up {
  position: relative;
  animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0,50%,0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

通过为需要应用淡入效果的元素添加 .fade-in-up class，我们将会得到一个向上淡入的效果。

解读代码

.fade-in-up {
  position: relative;
  animation: fadeInUp 1s ease;
}

首先，我们将被赋予此效果的元素设置 position: relative 属性，以便在进行 transform 动画时利用到较小的偏移量。

接着，我们使用 @keyframes 新增一个名为 fadeInUp 的动画。

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0,0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

在动画中，我们使用 from 和 to 来指定元素从何处移动到何处。

在 from 的位置，元素透明度为 0，垂直方向上偏移了 50% 的距离，并向上移动了一定的位置，通过这样的设置，我们使元素从 “无处可见” 的状态逐渐显现，正好符合了我们需求的“淡入”的效果。

而在 to 的位置，元素透明度设置为 1，并被重置到其原始位置和尺寸，这样我们才会在页面中看到过渡效果。

最后，通过绑定 animation 属性并设置其持续时间和缓动效果，就可以让我们的动画开始生效了。

结语

向上淡入淡出是一种不错的优化用户体验的动画效果，可以有效地增强页面元素的视觉效果，让页面更加生动有趣。希望以上的代码分享能够对你有所帮助。