用前端开发css把下面代码加一个动画效果<div class="header"> <h1 class="title">战线联播文字</h1> <h1 class="title">互动交流</h1></div>

可以使用CSS的动画属性来给这段代码添加动画效果，例如使用关键帧动画（@keyframes）来实现。

以下是一个例子，可以让标题从上往下依次出现，并且每个标题停留一段时间后再消失：

<div class="header">
  <h1 class="title">战线联播文字</h1>
  <h1 class="title">互动交流</h1>
</div>

.header {
  text-align: center;
}

.title {
  opacity: 0;
  animation: fade-in 1s ease-in-out forwards;
}

.title:first-child {
  animation-delay: 0.5s;
}

.title:last-child {
  animation-delay: 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

解释一下上面的代码：

1. 首先将`<div>`居中对齐。
2. 标题的初始状态是透明的（`opacity: 0;`），并且设置了一个动画（`animation: fade-in 1s ease-in-out forwards;`）。
3. 第一个标题的动画延迟0.5秒，最后一个标题的动画延迟1秒（通过`:first-child`和`:last-child`选择器）。
4. 使用`@keyframes`定义一个名为`fade-in`的动画，从上往下移动（`transform: translateY(-10%);`），同时将透明度从0变为1。

这样，当页面加载时，标题会从上往下依次出现，并且每个标题会停留一段时间后再消失。