滑动图像以显示带有CSS动画的文本

我想仔细看一下CSS动画属性，并逐步浏览我在自己的投资组合网站上使用的效果：使文本从移动的对象后面出现。 如果您想查看最终产品，这是一个孤立的示例 。

这是我们将要处理的内容：

看笔
揭示文本动画的第4部分–响应者Jesper Ekstrom（ @ jesper-ekstrom ）
在CodePen上 。

即使您对效果本身不很感兴趣，这也是扩展CSS知识并开始创建自己的独特动画的绝佳练习。 就我而言，深入研究动画使我对CSS的能力变得更加自信，并提高了我的创造力，这使我对整个前端开发更加感兴趣。

准备？ 组。 我们走吧！

步骤1：标记主要元素

在开始动画之前，让我们创建一个覆盖整个视口的父容器。 在其中，我们将文本和图像添加到单独的div中，以便以后更轻松地自定义它们。 HMTL标记如下所示：

<!-- The parent container -->
<div class="container"> 
  <!-- The div containing the image -->
  <div class="image-container">
  <img src="https://jesperekstrom.com/wp-content/uploads/2018/11/Wordpress-folder-purple.png" alt="wordpress-folder-icon">
  </div>
  <!-- The div containing the text that's revealed -->
  <div class="text-container">
    <h1>Animation</h1>
  </div>
</div>

我们将使用此可靠的转换技巧使divs在垂直和水平方向上居中，并具有以下position: absolute; 在父容器中，并且由于我们希望图像显示在文本的前面，因此我们向其添加了更高的z-index值。

/* The parent container taking up the full viewport */
.container {
  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
  overflow: hidden;
}

/* The div that contains the image  */
/* Centering trick: https://css-tricks.com/centering-percentage-widthheight-elements/ */
.image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2; /* Makes sure this is on top */
}

/* The image inside the first div */
.image-container img {
  -webkit-filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
  filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
  height: 200px;
}

/* The div that holds the text that will be revealed */
/* Same centering trick */
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1; /* Places this below the image container */
  margin-left: -100px;
}

在这篇文章中，我们将代码示例放在供应商的前缀之外，但是如果在生产环境中使用它们，则绝对应该考虑它们。

到目前为止，这就是给我们的东西，基本上就是我们两个元素堆叠在一起。

看笔
揭示文本动画的第1部分– Jesper Ekstrom（ @ jesper-ekstrom ）的邮件元素
在CodePen上 。

步骤2：将文字隐藏在方块后面

为了使我们的文本开始从左到右显示，我们需要在.text-container添加另一个div：

<!-- ... -->

  <!-- The div containing the text that's revealed -->
  <div class="text-container">
    <h1>Animation</h1>
    <div class="fading-effect"></div>
  </div>
  
<!-- ... -->

…并向其中添加以下CSS属性和值：

.fading-effect {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
}

如您所见，文本现在隐藏在此块的后面，该块具有白色背景色，可与我们的父容器融合。

如果我们尝试更改块的宽度，则文本开始显示。 继续尝试在Pen中使用它：

看笔
揭示文本动画的第2部分– Jesper Ekstrom（ @ jesper-ekstrom ）的隐藏块
在CodePen上 。

有另一种方法可以产生这种效果，而无需在背景上添加额外的块。 我将在本文后面介绍该方法。 🙂

步骤3：定义动画关键帧

我们现在准备好玩有趣的东西！ 要开始为对象设置动画，我们将使用animation属性及其@keyframes函数。 让我们首先创建两个不同的@keyframes ，一个用于图像，一个用于文本，最终看起来像这样：

/* Slides the image from left (-250px) to right (150px) */
@keyframes image-slide {
  0% { transform: translateX(-250px) scale(0); }
  60% { transform: translateX(-250px) scale(1); }
  90% { transform: translateX(150px) scale(1); }
  100% { transform: translateX(150px) scale(1); }  
}

/* Slides the text by shrinking the width of the object from full (100%) to nada (0%) */
@keyframes text-slide {
  0% { width: 100%; }
  60% { width: 100%; }
  75%{ width: 0; }
  100% { width: 0; }
}

我希望将所有@keyframes添加到CSS文件的顶部，以获得更好的文件结构，但这只是一个首选项。

@keyframes只使用其百分比值的一小部分（通常从60％到100％）的原因是，我选择在相同的持续时间内为两个对象设置动画，而不是在要应用的类上添加animation-delay 。 那只是我的偏爱。 如果选择执行相同的操作，请记住始终将值设置为0％和100％。 否则动画将开始向后循环，否则将弹出其他怪异的交互。

要为我们的类启用@keyframes ，我们将在CSS属性animation上调用动画名称。 因此，例如，将image-slide动画添加到图像元素，我们可以这样做：

.image-container img {
  /* [animation name] [animation duration] [animation transition function] */
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
}

@keyframes的名称与创建类的作用相同。 换句话说，名称实际上并不重要，只要在应用该元素的名称上使用相同的名称即可。

如果那个cubic-bezier部分导致头部刮伤，请查看Michelle Barker的这篇文章 。 她深入讨论了该主题。 但是，对于本演示而言，可以说这是一种创建自定义动画曲线的方法，该动画曲线用于对象从头到尾的移动方式。 无需任何猜测，网站cubic-bezier.com站点就是一个生成这些值的好地方。

我们讨论了一些想要避免循环播放动画的问题。 一旦动画达到100％的animation-fill-mode子属性，我们可以强制对象保持放置状态：

.image-container img {
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
  animation-fill-mode: forwards;
}

到目前为止，一切都很好！

看笔
揭示文本动画的第3部分– Jesper Ekstrom（ @ jesper-ekstrom ） 的@keyframes
在CodePen上 。

步骤4：回应代码

由于动画基于固定（像素）的大小，因此播放视口宽度将导致元素移位，这在我们尝试根据元素的位置隐藏和显示元素时是一件坏事。 我们可以在不同的媒体查询上创建多个动画来处理它（这是我最初所做的），但是一次管理多个动画并不是一件有趣的事情。 相反，我们可以使用相同的动画并在特定的断点处更改其属性。

例如：

@keyframes image-slide {
  0% { transform: translatex(-250px) scale(0); }
  60% { transform: translatex(-250px) scale(1); }
  90% { transform: translatex(150px) scale(1); }
  100% { transform: translatex(150px) scale(1); }
}

/* Changes animation values for viewports up to 1000px wide */
@media screen and (max-width: 1000px) {
  @keyframes image-slide {
    0% { transform: translatex(-150px) scale(0); }
    60% { transform: translatex(-150px) scale(1); }
    90% { transform: translatex(120px) scale(1); }
    100% { transform: translatex(120px) scale(1); }
  }
}

在这里，我们都响应！

看笔
揭示文本动画的第4部分–响应者Jesper Ekstrom（ @ jesper-ekstrom ）
在CodePen上 。

替代方法：无彩色背景的文本动画

我之前曾承诺过，我将展示一种用于淡入淡出效果的方法，所以让我们来谈谈。

无需使用创建一个新的div- <div class="fading-effect"> -，我们可以使用一些颜色欺骗手段来裁剪文本并将其混合到背景中：

.text-container {
  background: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

这样可以使文本透明，从而使后面的背景色渗入并有效隐藏。 并且，由于这是背景，因此我们可以更改背景宽度，并查看如何将文本削减给定的宽度。 这也使得可以向文本甚至其中的背景图像显示添加线性渐变颜色。

我在演示中未采用此方法的原因是因为它与Internet Explorer不兼容（请注意那些-webkit供应商前缀）。 我们在实际演示中介绍的方法使切换其他图像或任何其他对象的文本成为可能。

---

漂亮的小动画，对不对？ 它相对微妙，可以很好地增强UI元素。 例如，我可以看到它用来显示解释性文字甚至照片标题。 或者，可以使用一些JavaScript来在单击或滚动位置上触发动画，以使事情更具交互性。

有任何疑问吗？ 看到可以使它变得更好的东西吗？ 在评论中让我知道！

翻译自: https://css-tricks.com/slide-an-image-to-reveal-text-with-css-animations/