Question

我一直试图用关键帧教自己一些css动画，我试图创造一个小方块掉落的东西，然后从那个方块出来，一个租用角从左边突出，它然后在8秒左右后显示一些文字，然后租金回到较小的正方形（向右），较小的正方形向上撤退到“稀薄的空气”中。如果您想知道这是什么，当我在直播的时候有人在Twitch TV上关注我时会发出警报通知。到目前为止，这是我JSFiddle的努力。出于某些原因，JSFiddle的内容并没有出现在动画之前，但是在使用它的警报服务上确实会发生。我已经链接了their tester here，所以你可以看到我的意思。

HTML CODE：

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

然而，存在一些问题，首先是内容首先出现，然后是动画。我想它，所以你从一个空屏幕开始，然后动画确保方块先下降，然后租金角从广场突出，最后显示文本。这三个组件应该保持8秒，然后如前所述，另一个动画应该按照第一段中指定的顺序隐藏每个组件。

第二个问题是当租金角突出时，它不会从广场的右边缘做到，而是从左边做。所以它与广场重叠，这破坏了效果。

我已经根据这个现有问题编写了我的代码：css3 transition animation on load?，它已经帮助了很多，但它对我的特定需求没有帮助。

任何帮助都会被贬低，如果有什么不清楚，请告诉我。

注意，如果第二个链接不起作用，请告诉我，我会对其进行排序。

谢谢，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关键帧 - 动画在内容已经静态出现后开始

1 个答案: