Question

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

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

动画应该如下进行：

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

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

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

我不确定这是否是正确的做法。为了使设计响应，我想避免指定绝对尺寸，除了徽标和字体的大小。如果能提供任何帮助，我正在使用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>

LESS：

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

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

1 个答案: