We Keep Coding

React CSS animation-delay property does not work

just a quick question regarding animated elements in React.js - I have noticed that when trying to make use of the animation-delay property in CSS, that React does not seem to apply this rule at all for some reason.
For example, I am trying to make a basic loading component, which just has a series of basic circles moving about in sequence, the CSS for which is below:
.--loaderContainer {
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%), translateY(-50%);
width: 4rem;
height: 4rem;
}
.--loaderContainer:nth-child(n) {
width: 1rem;
height: 1rem;
border-radius: 9999px;
margin: 0;
padding: 0;
position: absolute;
animation-name: spin;
animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.--loaderContainer:first-child {
background-color: red;
transform: rotate(270deg);
animation-delay: -1.5s;
}
.--loaderContainer:nth-child(2) {
background-color: blue;
transform: rotate(180deg);
animation-delay: -1s;
}
.--loaderContainer:nth-child(3) {
background-color: green;
transform: rotate(90deg);
animation-delay: -0.5s;
}
.--loaderContainer:nth-child(4) {
background-color: yellow;
}
#keyframes spin {
0%,
100% {
transform: translate(0);
}
25% {
transform: translate(160%);
}
50% {
transform: translate(160%, 160%);
}
75% {
transform: translate(0, 160%);
}
}
As far as I can tell, this should stagger each of the child elements in sequence, performing the same animation but at different times. However, for some reason, React simply plays the animation, with no delay whatsoever and has all four elements animate at the exact same time.
It seems like a really basic issue to be having and while I have looked up a variety of answers, I just can't seem to find any concrete solutions, so would be super appreciative for any help. Thanks!

If all four circles are seen, I think this animation should be working properly.
The negative animation-delay values ensures that four circles start at different points of the animation, rather than putting an actual delay.
More about animation-delay
Without it, they will start at same point and move together while stacking with each other, resulting in only one circle is seen (the last yellow circle since it's on top of stack).
Here is a basic example for testing the effect of animation-delay by toggling it on and off for all the circles, it can run with the "run code snippet" button below.
Hope it will help.
const btn = document.querySelector("button");
const loaders = document.querySelectorAll(".--loaderContainer");
btn.addEventListener("click", () => {
loaders.forEach((loader) => loader.classList.toggle("no-delay"));
btn.textContent = loaders[0].classList.contains("no-delay")
? "turn delay on"
: "turn delay off";
});
.--loaderContainer {
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%), translateY(-50%);
width: 4rem;
height: 4rem;
}
.--loaderContainer:nth-child(n) {
width: 1rem;
height: 1rem;
border-radius: 9999px;
margin: 0;
padding: 0;
position: absolute;
animation-name: spin;
animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.--loaderContainer:first-child {
background-color: red;
transform: rotate(270deg);
animation-delay: -1.5s;
}
.--loaderContainer:nth-child(2) {
background-color: blue;
transform: rotate(180deg);
animation-delay: -1s;
}
.--loaderContainer:nth-child(3) {
background-color: green;
transform: rotate(90deg);
animation-delay: -0.5s;
}
.--loaderContainer:nth-child(4) {
background-color: yellow;
}
#keyframes spin {
0%,
100% {
transform: translate(0);
}
25% {
transform: translate(160%);
}
50% {
transform: translate(160%, 160%);
}
75% {
transform: translate(0, 160%);
}
}
button {
text-transform: uppercase;
padding: 6px;
}
section {
width: 100px;
height: 100px;
position: relative;
}
div.--loaderContainer.no-delay:nth-child(n) {
animation-delay: 0s;
opacity: 0.8;
}
body {
background-color: #aaa;
}
<button>turn delay off</button>
<section>
<div class="--loaderContainer"></div>
<div class="--loaderContainer"></div>
<div class="--loaderContainer"></div>
<div class="--loaderContainer"></div>
</section>

Increase the Size of animating box on Hover but It should not go outside of visible display during transition on edge

I am creating a box which animates, and moves and when i hover on it, it increases the size of the box. But when I hover on the box on the Edge of the display the increasing size of the box so it goes outside of visible display, but i want it to be inside of the visible display. CSS or JS both can work. My code is below.
body{
overflow-x: hidden;
}
#box1{
width: 5cm;
height: 4cm;
position: relative;
background-color: green;
animation-name: anim;
animation-duration: 10s;
animation-iteration-count: infinite;
transition: all 1s ease-in-out;
}
#keyframes anim{
0%{
top: 0px;
left: 0px; }
40%{
top: 300px;
left: 500px; }
75%{
top: 500px;
left: 10px; }
100%{
top: 0;
left: 0; }
}
#box1:hover{
animation-play-state: paused;
height: 300px; /* you can change it acc to you */
width:300px; /* you can change it acc to you */
}
}
jsbin link is here for website

Input tag are not able to focused using mouse

I was adding some background styles and the problem is i could not select the input tags, buttons using mouse, so the problem starts after adding the style.
Here is my code : Input tags not working
<div class="bla">
<div class="test-continer">
<span>Problem: Input tags, Buttons and link tags are <b>not working</b></span>
<h4>when "test-continer" div , h4 (header) and above span is removed its working!</h4>
<input id = "input" type="text">
<button id = "button" onClick = "check()" >Submit</button>
<strong>What makes this problem ?</strong>
</div>
</div>
When the <div class="test-continer">, <h4> and <span>were removed then the <input> is working properly, i am confused ?

Your .big-bubbles element is appearing on top of your .test-continer form. This means that you're clicking on the .big-bubbles element and not within your form control.
You can fix this by giving your .test-continer element a relative position and a z-index greater than 1 (which is the z-index on your .big-bubbles element:
.test-continer {
position: relative;
z-index: 2;
}
Modified Codepen demo.

It because your bubble div was overlay on that. It have position: absolute and z-index so that it was overlay to your continer.
So, that you need fix .test-continer div position: absolute or relative with z-index more then 1.
.test-continer {
position: absolute;
z-index: 2;
}

Another solution is disabling pointer event for bubble div.
.bg-bubbles {
z-index: 1;
pointer-events: none;
}

change bg-bubbles class position property from absolute to relative.
.bg-bubbles {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

Every thing is working whats the problem
Snippet
.bla {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-top: 0px;
overflow: hidden;
background: #4d4d4d;
background: -webkit-linear-gradient(top left, #4d4d4d 0%, #999999 100%);
background: linear-gradient(to bottom right, #4d4d4d 0%, #999999 100%);
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
<div class="bla">
<div class="test-continer">
<span>Problem: Input tags, Buttons and link tags are <b>not working</b></span>
<h4>when "test-continer" div , h4 (header) and above span is removed its working!</h4>
<input id = "input" type="text">
<button id = "button" onClick = "check()" >Submit</button>
<strong>What makes this problem ?</strong>
</div>
</div>

How to make an element with background image appear using css animation/javascript

I have a div tag with a background image. I want to use css animation or with combination of javascript/jquery to animate how the background image appears when the page loads. Currently, I have two vertical borders that I created with equal length and they both start off at the same position. When the page loads, one border will automatically move to the right side while the other one move to the left. During this transition, I want the div tag with the background image to slowly appear. Here's what I have so far:
.background-img {
width: 10px;
margin: 0 auto;
}
.borders {
position: absolute;
left: 50%;
width: 8px;
background-color: blue;
height: 50px;
border-radius: 4px;
}
.left-vertical-border {
animation-name:move-left;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.right-vertical-border {
top: 8px;
animation-name:move-right;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
#keyframes move-left {
from{transform: translateX(0px);}
to{transform: translateX(-100px);}
}
#keyframes move-right {
from{transform: translateX(0px);}
to{transform: translateX(100px);}
}
<!DOCTYPE html>
<html>
<head>
<title>Creating Vertical borders using animation/javascript</title>
</head>
<body>
<div class="left-vertical-border borders"></div>
<div class="background-img">fake bg image</div>
<div class="right-vertical-border borders"></div>
</body>
</html>
Thanks in advance!

Add CSS:
.background-img {
width: 10px;
height: 10px;
margin: 0 auto;
animation-name:img-ani;
animation-duration: 2s;
animation-timing-function: ease-in;
}
#keyframes img-ani {
from{opacity:0;}
to{opacity: 1;}
}

Grow line from center out on page load with CSS?

I am trying to accomplish the effect from this answer but without the text: Expand bottom border on hover
And know this can be accomplished by growing the entire div from the center as with here: http://jsfiddle.net/wNXLY/ but have no idea how to create this effect with line (i.e keeping the height static)
I have created my line here:
.line {
background: white;
width: 300px;
top: 10%;
height: 3.2px;
margin:auto;
position: relative;
}
And need to have the line grow from the center on page load. How can I do this?

You can use css animation with animation-fill-mode set to forwards, setting #keyframes width from 0% to n%, left from 50% to 5%
body {
width:100%;
}
div {
display:block;
position:absolute;
top:45%;
left:50%;
border-bottom:4px solid red;
width:0%;
text-align:center;
animation: line 2s linear forwards;
}
#keyframes line {
from {
left:50%;
width:0%;
}
to {
left:5%;
width:90%;
}
}
<div></div>

#keyframes line_animation {
from {
width: 0%;
}
to {
width:100%;
}
}
.line {
border-bottom: solid 3px #019fb6;
border-top-width: 0px;
animation-name: line_animation;
animation-duration: 4s;
animation-timing-function: linear;
}
Like this
<hr class="line" />

i have utilised display grid and SCSS to configure an authentic border animation
.top-border {
grid-area: tb;
// background: green;
border-bottom: $border-config;
width: 0%;
animation: horizontal-border-animation $animation-duration / 2 forwards;
animation-delay: $animation-delay;
}
.bottom-border {
grid-area: bb;
//to prevent being visible since it is going to be delayed
width: 0%;
// background: yellow;
border-top: $border-config;
animation: horizontal-border-animation $animation-duration / 2 forwards;
// because both right and bottom will start animating after top and left + the intitial delay
animation-delay: $animation-duration / 2 + $animation-delay;
}
#keyframes expand-border-width {
from {
width:0%;
}
to {
width:100%;
}
}
check my sample to gain an explicit clarification
https://codepen.io/ino0r/pen/eYEgvrZ

You don't need keyframes for this if you're just transitioning the effect.
<div class="line"></div>
.line {
width: 0%;
height: 1px;
position: absolute;
left: 50%;
background: #f00;
transition: all 1s;
}
.line:hover {
width: 100%;
left: 0%;
}