[分享]css元素显示与隐藏动画

CSS是网页开发中非常重要的一部分，其中css元素的显示和隐藏动画让网站更加生动和有趣。接下来，我们来一起学习如何使用CSS来实现元素的显示和隐藏动画。/ 显示动画 / / opacity动画 / ....

CSS是网页开发中非常重要的一部分，其中css元素的显示和隐藏动画让网站更加生动和有趣。接下来，我们来一起学习如何使用CSS来实现元素的显示和隐藏动画。

/* 显示动画 */

/* opacity动画 */
.fade-in{
  opacity: 0; /* 隐藏元素 */
  animation: fade-in 1s forwards; /* 渐现动画 */
}

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

/* translate动画 */
.slide-in{
  transform: translateX(-100%); /* 隐藏元素 */
  animation: slide-in 1s forwards; /* 滑入动画 */
}

@keyframes slide-in{
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(0);
  }
}

/* 隐藏动画 */

/* opacity动画 */
.fade-out{
  opacity: 1; /* 显示元素 */
  animation: fade-out 1s forwards; /* 渐隐动画 */
}

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

/* translate动画 */
.slide-out{
  transform: translateX(0); /* 显示元素 */
  animation: slide-out 1s forwards; /* 滑出动画 */
}

@keyframes slide-out{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-100%);
  }
} 

以上是使用CSS实现元素的显示和隐藏动画的样例代码，其中通过opacity和translate属性实现了渐隐渐现和滑出滑入的效果，分别使用fade-in/out和slide-in/out表示不同的效果。可以根据自己的需求选择不同的动画方式，以及根据不同情况修改速度和时间等参数。