如何在CSS中实现卡片滚动动画_通过CSS animation和transform translateY实现卡片滚动效果

使用CSS的animation与transform: translateY可实现卡片自动上下滚动。首先构建包含多个.card的.card-container容器，设置固定高度并隐藏溢出；通过@keyframes定义从translateY(0)到translateY(-100%)的动画，使内容线性向上移动；为实现无缝滚动，可复制一份卡片内容，并将动画终点改为translateY(-50%)，形成视觉连贯循环；结合infinite属性让动画持续播放，适用于公告栏、排行榜等场景，无需JavaScript即可完成流畅滚动效果。

想让一组卡片自动上下滚动展示内容？用CSS的animation和transform: translateY就能轻松实现，无需JavaScript。关键在于设置一个持续位移动画，让卡片容器平滑地向上或向下“流动”。

基本结构：HTML布局

先搭建简单的HTML结构。用一个外层容器包裹所有卡片，确保溢出隐藏，内部卡片垂直排列：

  卡片1
  卡片2
  卡片3
  卡片4
  卡片5

CSS样式与动画定义

通过CSS设置容器为固定高度并隐藏溢出，使用@keyframes定义从0到负Y位移的动画，使内容向上滚动：

关键点： 动画的from是translateY(0)，to是translateY(-100%)，表示整体上移一个容器高度。

.card-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.card {
  height: 100px;
  margin: 10px 0;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.card-container {
  animation: scrollCards 6s linear infinite;
}

@keyframes scrollCards {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

优化滚动流畅性

如果卡片数量少，滚动可能不连贯。解决方法是复制一份卡片内容，形成无缝循环效果：

• 在HTML中重复卡片列表
• 调整动画时长匹配总高度移动时间
• 可加入ease-in-out让启停更自然（若非无限播放）

例如，双倍卡片内容后，动画to改为translateY(-50%)，刚好滚动到第二组开头，视觉上更顺滑。