使用CSS3写一个交错显示的动画特效

你可以使用CSS3的关键帧动画（@keyframes）来创建一个交错显示的动画特效。以下是一个简单的示例，其中包含了两个元素，它们会以交错的方式淡入淡出：

HTML:

<div class="container">
  <div class="element" id="element1">Element 1</div>
  <div class="element" id="element2">Element 2</div>
</div>

CSS:

.container {
  position: relative;
  height: 200px;
  width: 400px;
  margin: 50px auto;
  text-align: center;
  line-height: 200px;
  font-size: 24px;
}

.element {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

#element1 {
  animation: fadeInOut 4s infinite;
}

#element2 {
  animation: fadeInOut 4s infinite 2s; /* Delay of 2 seconds */
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

在这个示例中，.element 类设置了元素的初始透明度为0（完全透明）。#element1 和 #element2 分别应用了 fadeInOut 动画，但 #element2 的动画有一个2秒的延迟，以实现交错效果。

@keyframes fadeInOut 定义了动画的关键帧。在动画的开始（0%）和结束（100%）时，元素的透明度为0；在动画的中间（50%）时，元素的透明度为1（完全不透明）。这样，元素就会在动画过程中淡入淡出。

你可以根据需要调整动画的持续时间、延迟和其他属性来达到你想要的效果。