如何在CSS/LESS中设置此序列的动画？

这是我第一次涉足动画。我正在尝试创建一个动画闪屏，它有一个滑动的徽标和两段淡入淡出的文本。显示文本时的布局应如下所示：

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

动画应按如下方式进行：

• 标志[L]从中间开始
• 徽标幻灯片为每段文字留出了空间
• 文字1在徽标右侧淡入淡出视野
• 文本2在同一位置淡入淡出视图
• 徽标滑回中心

我面临的问题是如何将元素层次结构和可设置动画的属性正确地结合起来，以将所有内容都放在它应该放的地方

我最好的尝试（如下）是从最大宽度为0、不透明度为0的文本开始。我在第二个更宽的文本上设置“最大宽度”（max width）动画，将徽标推到一边，然后等待适当的时间间隔，同时第二个动画使用不透明度显示第一个文本。但我仍然不能使这两个文本正确地出现在同一个地方，而标志保持不变。（假设屏幕上有空间，两个文本应垂直和水平居中显示在徽标右侧的空间中，但第一个文本为一行，第二个文本为两行。）

我不确定这是否是正确的方法。为了使设计具有响应性，我想避免指定绝对尺寸，除了徽标和字体的大小。我使用引导，如果它提供任何帮助

HTML:

---

事实证明，使用

transform

将所有内容堆叠在屏幕中央，然后使用jQuery设置过渡动画要比直接在CSS中制作所有动画容易得多：

<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)
  }
}

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)});