css3 动画效果 向下铺开

CSS3动画效果可以创建出各种动态视觉效果，向下铺开（Fade In Down）是一种常见的淡入效果，它会让元素从顶部开始逐渐显示出来，仿佛是从下方平移上来一样。要实现这种效果，你可以使用`@keyframes`规则结合`opacity`属性来定义关键帧动画：

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.element-to-animate {
  animation-name: fadeInDown;
  animation-duration: 0.5s; /* 设置动画持续时间 */
  animation-fill-mode: both; /* 动画结束状态保持 */
}

在这个例子中，`.element-to-animate`是你想要应用动画的元素选择器。`animation-name`设置了动画名称为`fadeInDown`，`animation-duration`指定了动画播放的时间长度。`transform: translateY(-100%)`使得元素初始时位于屏幕之外，然后`transform: translateY(0)`使其恢复到正常位置。