Currently, I have been delving into CSS animations with keyframes on my own. My goal is to create an animation where a small square drops down, then a rectangle extends from the left side of that square. Following this, some text appears after around 8 seconds. Next, the rectangle retreats back into the smaller square from the right side, and the smaller square moves upwards disappearing into 'thin air'. The purpose of this animation is to serve as an alert notification when someone follows me on Twitch TV during my livestream. For an example of my progress so far, you can check out this JSFiddle. Strangely, the content does not appear before the animation on JSFiddle, yet it does occur on the alert service I use. Here is a link to their tester, so you can see exactly what I mean.
Here's the 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>
The 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, I've encountered a few issues with my implementation. Firstly, the content displays before the animation sequence initiates. I want the screen to start empty and then execute the animations in the intended order - first dropping the square, followed by the protruding rectangle, and finally displaying the text. These elements need to remain visible for 8 seconds before another animation hides them as outlined in the initial description.
The second issue is that when the rectangle protrudes, it starts from the left edge of the square instead of the right edge as intended. This overlap disrupts the effect I'm aiming for.
I've referenced an existing question on Stack Overflow about css3 transition animation on load?, which provided some guidance but doesn't fully address my specific requirements.
Any assistance or clarity on these matters would be greatly appreciated. Should anything be unclear, please do let me know.
Note: If the second link isn't functional, kindly inform me so I can rectify it promptly.
Thank you, GR412.