CSS 动画效果：使用 transition 让 display 属性显示时带动画

使用 CSS3 的 transition 属性可以实现 display 显示时的动画效果。具体方法如下：

1. 首先给需要设置动画效果的元素添加一个初始状态的样式，例如：

.hide {
  display: none;
}

2. 接着定义一个过渡效果的样式，例如：

.show {
  display: block;
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

其中，transition 属性用于指定过渡效果的属性、时间和速度曲线，这里我们使用 opacity 属性作为过渡效果的属性，使其从 0 到 1 的过程有一个渐变的效果。

3. 最后，使用 JavaScript 来切换元素的类名，实现动画效果，例如：

document.getElementById('myElement').classList.toggle('hide');
document.getElementById('myElement').classList.toggle('show');

这里我们使用了 classList.toggle() 方法来切换元素的类名，从而实现隐藏和显示的效果。同时，由于我们在 .show 样式中定义了 transition 属性，因此元素在显示时会有一个渐变的效果。