css显示隐藏动画

CSS 可以通过使用过渡效果和动画效果实现显示隐藏动画。

使用过渡效果，可以在元素从一个状态到另一个状态之间进行平滑的变换，从而实现显示隐藏效果。举个例子：

#myDiv {
  height: 0;
  transition: height 0.5s;
  overflow: hidden;
#myDiv.show {
  height: 100px;
使用动画效果，可以创建复杂的动画效果。通过在 CSS 中定义一个 @keyframes 规则，可以控制元素在某一特定时间段内的样式。举个例子：
@keyframes fadeIn {
  from {
    opacity: 0;
    opacity: 1;
#myDiv {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;