css盒子显示隐藏动画

可以使用CSS3的transition和transform属性来实现盒子的显示隐藏动画。

首先，设置盒子的初始状态为隐藏，可以通过设置display:none或者opacity:0来实现。然后，当需要显示盒子时，设置display:block或者opacity:1，并且加上transition和transform属性，使其产生平滑的过渡效果。

以下是一个例子：

HTML代码：

<div class="box">这是一个盒子</div>
<button id="btn">显示/隐藏盒子</button>

CSS代码：

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  display: none; /* 初始状态为隐藏 */
  transition: transform 0.5s ease-out; /* 设置过渡效果 */
}

.show {
  display: block; /* 显示盒子 */
  transform: scale(1); /* 平滑过渡到正常大小 */
}

.hide {
  opacity: 0; /* 透明度为0 */
  transform: scale(0); /* 平滑过渡到0大小 */
}

JavaScript代码：

var btn = document.getElementById("btn");
var box = document.querySelector(".box");

btn.onclick = function() {
  if(box.classList.contains("show")) {
    box.classList.remove("show");
    box.classList.add("hide");
  } else {
    box.classList.remove("hide");
    box.classList.add("show");
  }
}

通过上述代码，点击按钮时，盒子会产生平滑的显示/隐藏动画。