CSS 关键帧 - 动画在内容已经静态出现后开始

Question

我一直在尝试自学一些带有关键帧的 css 动画，我正在尝试创建一些东西，其中有一个小方块掉落，然后从那个方块中伸出一个矩形左，然后在 8 秒左右后显示一些文本，然后 rentangle 退回较小的正方形（向右），较小的正方形向上退回 'thin air'。如果您想知道这是干什么用的，那是当有人在我直播时在 Twitch TV 上关注我时的提醒通知。这里有一个JSFiddle of my efforts so far. For some reason on JSFiddle the content doesn't appear before the animation, however on the the alert service i use it does happen. I've linked their tester here，所以你可以明白我的意思。

HTML 代码：

<html>

<head>
  <title>GR412 Twitch Follower Alert</title>
  <link href="Twitch\followeralert.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
  <div class="follower-container">

    <div class="left-square-container">

    </div>

    <div class="right-retangle-container">

      <div class="header">
        <span class='keyword name'>{name}</span> is now following you!
      </div>

    </div>

  </div>

</body>

</html>

CSS 代码：

@keyframes slideInFromAbove {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideInFromTheLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromBelow {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

@keyframes slideInFromTheRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}

.follower-container {
  display: flex;
  font-family: 'Roboto';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.left-square-container {
  width: 75px;
  height: 75px;
  background: #313131;
  animation: 1s 1s 1 slideInFromAbove;
}

.right-retangle-container {
  width: 500px;
  height: 75px;
  background: #212121;
  animation: 1s 2s 1 slideInFromTheLeft;
}

.header {
  font-size: 24px;
  color: #ffffff;
  text-align: center; /*vertical alignment of text*/
  position: relative; /*horizontal alignment of text*/
  top: 50%; /*horizontal alignment of text*/
  transform: translateY(-50%); /*horizontal alignment of text*/
  margin: 10px,
    10px,
    10px,
    10px; /*GOT TO HERE, THIS COULD BE CAUSING TWITCHING*/
}

.keyword:not(.user_message) {
  color: #0d47a1;
}

但是存在一些问题，首先是内容先出现，然后是动画。我希望它从一个空屏幕开始，然后动画确保正方形首先下降，然后 rentangle 从正方形突出，最后显示文本。这三个组件应保持 8 秒，然后如前所述，另一个动画应按第一段中指定的顺序隐藏每个组件。

第二个问题是，当 rentangle 突出时，它不是从正方形的右侧边缘突出，而是从左侧突出。所以它与正方形重叠，破坏了效果。

我的代码基于这个存在的问题：css3 transition animation on load?，这对我有很大帮助，但对我的特定需求没有帮助。

如有任何帮助，我们将不胜感激，如果有什么不清楚的地方，请告诉我。

请注意，如果第二个 link 不起作用，请告诉我，我会解决的。

谢谢，GR412。

Answer 1

问题1：您需要设置内容初始位置的样式。

问题 2：position: relative; z-index: /*some value*/因此您可以适当地分层内容。

您还需要使用animation-fill-mode: forwards 这会将结束样式设置为与之关联的 @keyframes 的结束样式。

我已经调整了你的时间安排。这是其中的 plnkr。阅读 CSS

中的评论

您最终不得不计算百分比。我会考虑制定一个可以接受 scss/less/sass 等变量的计算

CSS 评论：

/*
to calculate these percentages:

([seconds of portion of animation] x 100)/[total seconds of animation]

1)  slideInFromAbove starts
2)  slideInFromTheLeft starts
3)  slideInFromTheLeft ends
4)  slideInFromAbove ends


slideInFromAbove:  
  1)  slide down
  2)  hold 
  2)  slide up


slideInFromTheLeft:
  1)  slide right
  2)  hold
  3)  slide left


*/

CSS 关键帧 - 动画在内容已经静态出现后开始

CSS Keyframes - Animation commences after content has already statically appeared

html

css

keyframe

css-animations