css - 如何在 CSS/LESS 中为这个序列设置动画？

Question

这是我第一次涉足动画。我正在尝试创建一个动画启动画面，其中包含一个滑动 Logo 和两个淡入淡出的文本片段。显示文本时的布局应如下所示:

*------------------------*
|                        |
|                        |
|  [L] Lorem ipsum etc.  |
|                        |
|                        |
*------------------------*

动画应该像这样进行:

• Logo [L] 从中心开始
• Logo 向左滑动，为每段文字腾出空间
• 文本 1 在 Logo 右侧淡入和淡出 View
• 文本 2 在同一位置淡入和淡出 View
• Logo 滑回中心

我面临的问题是找到元素层次结构和可动画属性的正确组合，以将所有内容放在应有的位置。

我最好的尝试(下图)从最大宽度为 0 和不透明度为 0 的文本开始。我在第二个更宽的文本上设置最大宽度动画以将 Logo 推到一边，然后等待适当的时间间隔，同时第二个动画使用不透明度显示第一个文本。但是我仍然无法在 Logo 保持不变的情况下使两个文本正确显示在同一位置。 (假设屏幕上有空间，两个文本应在 Logo 右侧的空间中垂直和水平居中显示，但第一个文本为一行，第二个文本为两行。)

我不确定这是否是正确的方法。为了使设计具有响应性，我想避免指定除 Logo 和字体大小之外的绝对尺寸。如果有任何帮助，我正在使用 Bootstrap。

Codepen example

HTML:

<div class="overlay">
  <div class="overlay--splash"></div>
  <div>
    <div id="overlay__one" class="h1 overlay--text">Short piece of text</div>
    <div id="overlay__two" class="h1 overlay--text">Slightly longer text <br /> which will span two lines.</div>
  </div>
</div>

减少:

.overlay {
  z-index: 999;
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.9);
  padding: 100px;

  .overlay--splash {
    width: 200px;
    min-width: 200px;
    height: 200px;
    margin: 1em;
    display: inline-block;
    align-self: center;
    justify-content: center;
    background-image: url("/images/app-icon.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 200px; }

  .overlay--text {
    display: inline-block;
    width: auto;
    max-width: 0;
    font-size: 64px;
    font-weight: 900;
    font-family: sans-serif;
    color: @dark-blue;
    opacity: 0;
  }

  #overlay__one {

    .keyframes(fade-in-out; {
      0% { opacity: 0; }
      40% { opacity: 0; }
      60% { opacity: 1; }
      80% { opacity: 1; }
      100% { opacity: 0; }
      });

    .animation(fade-in-out 5s linear)
  }

  #overlay__two {
    .keyframes(slide-fade; {
      0% { opacity: 0; max-width: 0; }
      10% { opacity: 0; max-width: 0; }
      20% { opacity: 0; max-width: 1600px; }
      50% { opacity: 0; max-width: 1600px; }
      60% { opacity: 1; }
      70% { opacity: 1; }
      80% { opacity: 0; max-width: 1600px; }
      90% { max-width: 0; }
      });

    .animation(slide-fade 10s linear)
  }
}

Answer 1

与其尝试直接在 CSS 中完成所有动画，不如使用 transform 将所有内容堆叠在屏幕中央，然后使用 jQuery 动画转换:https://codepen.io/anon/pen/BWpQXg

var dX = $("#overlay__two").width() / 2;
$(".overlay--splash").animate({left: "-=" + (dX + 140)});
$("#overlay__one").delay(1000).fadeToggle(1000).fadeToggle(1000);
$("#overlay__two").delay(3000).fadeToggle(1000).delay(1000).fadeToggle(1000);
$(".overlay--splash").delay(6000).animate({left: "+=" + (dX + 140)});