My animation won't play

Code Help HTML/CSS/JS
1

Question:
Why won’t the animation work and the text also isn’t centered for some reason.
Repl link:
https://replit.com/@AleksisLeinats1/COLORS?s=app

.title {
  text-align: center;
  animation-name: colorChange;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}


@keyframes colorChange {
  0% {color: #ff0000;}
  20% {color: #ffff00;}
  40% {color: #00ff00;}
  60% {color: #0000ff;}
  80% {color: #800080;}
  100% {color: #ff0000}
}
2

Hey @AleksisLeinats1 welcome to the forums!

I see your problem, everywhere in your HTML your using IDs, and in the CSS your using those IDs, but your not using that for the title instead you’re using a class indicator not an ID indicator. Here’s your corrected code → 

#title {
  text-align: center;
  animation-name: colorChange;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

Also I saw a problem for white not showing up, there was no closing tag for br. You also didn’t need styling for white in the HTML since it was in the CSS → 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&display=swap" rel="stylesheet">
</head>

<body>
  <script src="script.js"></script>

  <div class="menu">   
  <h2 id="r">Red</h2>
  <h2 id="o">Orange</h2>
  <h2 id="y">Yellow</h2>
  <h2 id="g">Green</h2>
  <h2 id="b">Blue</h2>
  <h2 id="p">Purple</h2>
  <h2 id="pi">Pink</h2>
  <h2 id="br">Brown</h2> <!-- You forgot a closing tag -->
  <h2 id="w">White</h2> <!-- Removed styling -->
  <h2 id="gr">Gray</h2>
  <h2 id="bl">Black</h2>
  </div>
  <h1 id="title">COLORS</h1>
</body>

</html>

I hope this helps!

2 Likes
3

Thank you so much! I was gonna ask about the white not showing up later too, but you already answered that question. THX

1 Like
4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.