当前位置：首页 > 文章列表 > 文章 > 前端 > CSS动画实现卡片滑动效果的关键在于使用 transform: translate 结合 @keyframes。以下是详细步骤和示例代码，帮助你理解如何在卡片滑动中应用 CSS 动画。一、基本结构首先，创建一个包含卡片的容器，并为卡片设置基础样式：

卡片内容

.card-cont

CSS动画实现卡片滑动效果的关键在于使用 transform: translate 结合 @keyframes。以下是详细步骤和示例代码，帮助你理解如何在卡片滑动中应用 CSS 动画。一、基本结构首先，创建一个包含卡片的容器，并为卡片设置基础样式：

卡片内容

.card-cont

2026-03-14 14:12:37 0浏览收藏

使用 translate 实现水平滑动

要让卡片从一侧滑入视图，可以借助 translateX() 在关键帧中定义起始和结束位置。

例如，让卡片从右侧外滑入到原始位置：

@keyframes slideInFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

将该动画应用到卡片：

.card { animation: slideInFromRight 0.6s ease-out; }

这样卡片会从右边不可见处滑动到正常位置，视觉自然且不引起页面重排。

垂直滑动与多方向移动

若需要卡片从上方滑下，可使用 translateY()：

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

也可同时在 X 和 Y 方向移动，实现斜向滑动：

@keyframes diagonalSlide { from { transform: translate(-50%, -50%); } to { transform: translate(0, 0); } }

循环滑动与无限轮播效果

在轮播图中，可设置无限动画让卡片连续滑动。假设每张卡片宽度为 100%，每次向左移动一整屏：

@keyframes carouselSlide { 0%, 25% { transform: translateX(0); } 33.3%, 58.3% { transform: translateX(-100%); } 66.6%, 91.6% { transform: translateX(-200%); } 100% { transform: translateX(0); } }

配合 animation-timing-function: steps() 可模拟逐帧切换效果，使轮播更精准。

优化性能与硬件加速

使用 transform 进行动画之所以高效，是因为它通常只触发合成层的变化，不会影响布局或绘制。浏览器可利用 GPU 加速处理 translate 变换。

建议添加 will-change 提示浏览器提前优化：

.card { will-change: transform; animation: slideInFromRight 0.6s forwards; }

注意避免过度使用 will-change，仅在动画即将开始时启用。

基本上就这些。合理运用 translate 和 keyframes，能让卡片滑动既顺滑又高效，是现代前端交互动效的常用手段。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS动画实现卡片滑动效果的关键在于使用 transform: translate 结合 @keyframes。以下是详细步骤和示例代码，帮助你理解如何在卡片滑动中应用 CSS 动画。一、基本结构首先，创建一个包含卡片的容器，并为卡片设置基础样式：

卡片内容

.card-container { width: 300px; height: 200px; overflow: hidden; } .card { width: 100%; height: 100%; background: #f0f0f0; transition: transform 0.5s ease; }二、使用 @keyframes 创建动画接下来，定义一个关键帧动画，让卡片从右侧滑入或滑出：@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }然后将这个动画应用到卡片上：.card { animation: slideIn 1s forwards; }三、结合 transform: translate 实现滑动效果如果你希望卡片在用户交互（如点击按钮）后滑动，可以》文章吧，也可关注golang学习网公众号了解相关技术文章。