如何在CSS中实现滑动面板动画_left transform结合关键帧-css教程-PHP中文网

如何在CSS中实现滑动面板动画_left transform结合关键帧

P粉602998670

发布： 2025-11-01 10:09:02

原创

885人浏览过

使用transform和@keyframes实现滑动面板动画，通过translateX控制位移，结合ease缓动和forwards保持状态，优先用transform提升性能，避免重排，并可通过JavaScript控制类名切换动画。

如何在css中实现滑动面板动画_left transform结合关键帧

在CSS中实现滑动面板动画，可以通过 transform 属性结合 @keyframes 关键帧来完成。这种方式性能好、代码简洁，且能实现流畅的过渡效果。

基本原理：使用 transform 和 @keyframes

transform: translateX() 可以让元素在水平方向移动，配合 @keyframes 定义动画过程，实现从左或右滑入的面板效果。

示例：从左侧滑入的面板

.slide-panel {
  width: 300px;
  height: 200px;
  background-color: #4CAF50;
  position: absolute;
  left: -300px; /* 初始状态隐藏在左侧 */
  top: 50px;
  animation: slideInFromLeft 0.6s ease forwards;
}

@keyframes slideInFromLeft {
  to {
    transform: translateX(300px); /* 向右移动300px，完全进入视图 */
  }
}

登录后复制

说明：

立即学习“前端免费学习笔记（深入）”；

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

初始时面板通过 left: -300px 隐藏在屏幕外左侧
动画过程中，使用 transform: translateX(300px) 将其平移至可视区域
ease 让动画有缓动效果，forwards 确保动画结束后保持最终状态

反向动画：滑出到左侧

如果需要关闭时滑出，可定义另一个关键帧动画：

@keyframes slideOutToLeft {
  from {
    transform: translateX(300px);
  }
  to {
    transform: translateX(-300px); /* 滑回左侧 */
  }
}

/* 使用时切换类名 */
.close-panel {
  animation: slideOutToLeft 0.6s ease forwards;
}

登录后复制