i m watching a tutorial video about css loaders, and replicating exactly that, in the code below, at this point in the video, the css transform, translate3d works, but on the replicated code below, it doesn't i ve checked what could possibly be the problem, severally comparing my code with that in the vid, but no issues, so how come css transform: translate3d isn't working, why are my balls not bouncing?
/*index.html*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/loader3.css">
<title>CSS Loaders</title>
</head>
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
/* loader3.css*/
.loader {
display: flex;
justify-content: center;
align-items: center;
}
.loader > span {
display: inline-block;
background-color: purple;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0 8px;
transform: translate3d(0);
animation: bounce 0.6s infinite alternate;
}
.loader > span:nth-child(2) {
background-color: palevioletred;
}
.loader > span:nth-child(3) {
}
@keyframes bounce {
to {
width: 16px;
height: 16px;
transform: translate3d(0 -16px, 0)
}
}
pay attention to details
transform: translate3d(0 -16px, 0)lack ,
transform: translate3d(0, -16px, 0)