css Animation 动画-右进左出

作者：System 时间：2024年08月24日分类：所有,css 字数：999

这篇文章距离上次修改已过223天，其中的内容可能已经有所变动。

CSS 动画可以通过关键帧（@keyframes）来定义。为了实现一个右进左出的动画效果，我们可以定义两个关键帧：进场和离场。

以下是一个简单的例子：

/* 定义进场动画 */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 定义离场动画 */
@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* 应用动画 */
.element {
  animation: slideInFromRight 1s ease forwards;
}

/* 离场时应用动画 */
.element-leave {
  animation: slideOutToRight 1s ease forwards;
}

在 HTML 中，你可以这样使用：

<div class="element">我从右边进来</div>
<!-- 某个时刻触发离场 -->
<div class="element-leave">我会从右边走</div>

当 .element 进入页面时，它会执行 slideInFromRight 动画，从右侧的100%位置开始，到0%位置结束，并逐渐变为完全可见。

当 .element-leave 类被添加时，元素会执行 slideOutToRight 动画，从当前位置开始，移动到右侧100%的位置，并逐渐变为不可见，完成离场动画。

animation 属性的值包括动画名称（slideInFromRight 和 slideOutToRight）、持续时间、缓动函数、填充模式（forwards 保证动画完成后元素保持在结束状态）。

css Animation 动画-右进左出

评论已关闭

推荐阅读