Advanced techniques: Using CSS variables in animations 관련

How to use CSS variables like a pro

---

Build four simple projects to learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

• Animating button color dynamically

---

How to use CSS variables like a pro

Build four simple projects to learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

CSS variables can be used with @keyframes to make animations more dynamic and reusable without direct changes to the styles. However, they must be applied outside the@keyframes since variables are not recognized in keyframes.

---

Animating button color dynamically

:root {
  --btn-bg: #3498db; /* Default background color */
}

button {
  background-color: var(--btn-bg);
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  from {
    background-color: var(--btn-bg);
  }
  to {
    background-color: lighten(var(--btn-bg), 20%);
  }
}

The background color changes dynamically based on --btn-bg. Adjusting --btn-bg in :root instantly updates the animation color!

Now, we can use JavaScript to update the CSS variable in real-time to animate the button’s color on hover or user interaction

document.querySelector("button").addEventListener("mouseover", () => {
  document.documentElement.style.setProperty("--btn-bg", "#e74c3c");
});

document.querySelector("button").addEventListener("mouseout", () => {
  document.documentElement.style.setProperty("--btn-bg", "#3498db");
});

The button smoothly transitions between colors when hovered!