CSS 使用动画显示/隐藏元素

在本文中，我们将介绍如何使用CSS动画来显示和隐藏网页中的元素。CSS动画是一种通过添加和移除类来实现元素动态效果的方法。我们将学习如何使用过渡和关键帧动画来创建各种显示和隐藏效果的示例。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用过渡显示/隐藏元素

过渡是一种通过定义元素属性的起始和结束状态之间的中间状态来实现平滑过渡效果的方法。我们可以使用transition属性来定义过渡效果，并使用visibility或opacity属性将元素的显示状态从可见到隐藏或从隐藏到可见进行过渡。

1. 使用过渡的fadeIn效果

下面的示例演示了如何使用过渡效果创建一个fadeIn动画：

.fadeIn {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out;
}

.fadeIn.show {
  opacity: 1;
  visibility: visible;
}

上述代码中，我们首先将元素的起始状态设置为opacity: 0和visibility: hidden。然后，通过添加类名.show来将元素的状态从隐藏转为显示。在CSS中，我们使用.show类来定义元素的结束状态，其中opacity设置为1，visibility设置为visible。通过定义过渡属性transition来使过渡效果在0.5秒内进行。

2. 使用过渡的slideDown效果

下面的示例演示了如何使用过渡效果创建一个slideDown动画：

.slideDown {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease-in-out;
}

.slideDown.show {
  height: auto;
}

在上述代码中，我们首先将元素的起始状态设置为height: 0和overflow: hidden。然后，在使用.show类时，将元素的高度设置为auto，从而使元素逐渐展开。使用transition属性来设置元素高度的过渡效果。

使用关键帧动画显示/隐藏元素

关键帧动画是一种通过在元素的不同状态之间定义关键帧来实现动画效果的方法。我们可以通过使用@keyframes指令和animation属性来创建关键帧动画。

1. 使用关键帧动画的fadeIn效果

下面的示例演示了如何使用关键帧动画创建一个fadeIn动画：

@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

.fadeIn {
  animation: fadeIn 0.5s ease-in-out;
}

在上述代码中，我们首先使用@keyframes指令来定义关键帧动画，其中from表示起始状态，to表示结束状态。然后，通过添加类名.fadeIn来应用这个动画，并设置动画的执行时间和过渡效果。

2. 使用关键帧动画的slideLeft效果

下面的示例演示了如何使用关键帧动画创建一个slideLeft动画：

@keyframes slideLeft {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.slideLeft {
  animation: slideLeft 0.5s ease-in-out;
}

在上述代码中，我们使用transform属性来定义元素的平移效果。通过将元素的起始状态设置为transform: translateX(-100%)，结束状态设置为transform: translateX(0)，来创建一个从左侧滑动到原始位置的动画效果。