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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-25

浏览次数：次

返回列表

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

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

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

基本结构：HTML布局

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

<div class="card-container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
  <div class="card">卡片5</div>
</div>

CSS样式与动画定义

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

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

语鲸

AI智能阅读辅助工具

314 查看详情

.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%);
  }
}