CSS Keyframes - Animation commences after content has already statically appeared

Question

I've been trying to teach myself some css animations with keyframes, and I'm trying to create something in which a small square drops down, then out of that square, a rentangle protrudes from the left, it then displays some text after 8 or so seconds and then the rentangle retreats back into the smaller square (to the right) and the smaller square retreats upwards into 'thin air'. If you're wondering what this is for it's an alert notification when someones follows me on Twitch TV while I livestream. Here is a 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, so you can see what I mean.

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 CODE:

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

However there are some issues, first being that the content appears first, then does the animation. I would like it so you start with an empty screen and then the animation ensures that the square drops down first, then the rentangle protrudes from the square and finally the text is displayed. These three components should hold for 8 seconds then as already described another animation should hide each component in the order specified in the first paragraph.

The second issue is that when the rentangle protrudes, it doesn't do it from the right hand edge of the square, rather it does it from the left. So it overlaps the square, which ruins the effect.

I've based my code off this exsisting question:css3 transition animation on load?, which has helped a lot, but it doesn't help with my specifc needs.

Any help would be appreicated, and if something isn't clear let me know.

Note, if the second link doesn't work, let me know and i'll sort it.

Thanks, GR412.

Tamb Tamb · Accepted Answer · 2017-06-22T16:06:38

Issue 1: You need to set the styles of the initial placement for the content.

Issue 2: position: relative; z-index: /*some value*/ So you can properly layer the content.

You also need to use animation-fill-mode: forwards This sets the end styles to the end styles of @keyframes associate with it.

I've tweaked your timing. Here's a plnkr of it. Read the comments in the CSS

You end up having to calculate percentages. I would consider working out a calculation that can accept variables for scss/less/sass etc.

CSS comments:

/*
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 Keyframes - Animation commences after content has already statically appeared

1 Answers