Transition of Background-Color

CSS Transition of background-color

You're not dumb! Just need some practice. What you have is fine I just can't see the rest of your code. But this is what you're looking for:

div {  display: block;  width: 100px;  height: 100px;  background-color: red;  transition: background-color 1000ms linear;}
div:hover {  background-color: green;}

<div>
</div>

CSS Transition a background-color from 50% to 100% on hover

<!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" />
    <title>Document</title>

    <style>
      .container {
        height: 100vh;
        width: 50%;
        background-color: #999;
        transition: all 0.70s ease-in-out;
      }

      .container:hover{
        width: 100%
        }

    </style>

  </head>
  <body>
    <div class="container">
    </div>
  </body>
</html>

I think this is a smooth transition.

Background-color transition doesn't work

Inline styles have the highest specificity, so your rule isn't being applied. You can get around that by not using inline styles, or applying the dreaded !important to the rule

.container a {  background-color: #333;  transition: background-color 0.2s;}
.container a:hover {  background-color: red !important;}

<div class="container">  <a href="#">Login</a>  <!-- This works well-->  <a href="#" style="background-color: green">Login</a>  <!-- This does not--></div>

Text color Transition is is slower than background-color Transition (with same values for transition in * selector)

Consider a higher specificity alternative in your CSS to create a smoother transition. The * (all) selector is great for targeting every element on the page but due to your background transition happening to the whole HTML document you need to target the parent before anything else which is why you are seeing a delay of just a few milliseconds. By using :root or HTML as your selector you should get the expected result. Run the code snippet below to see if that resolves your issue, hope it helps!

const html = document.querySelector("html")
lightThemeButton = document.querySelector(".light-theme-button")
darkThemeButton = document.querySelector(".dark-theme-button")

lightThemeButton.addEventListener("click", () => {
  html.style.colorScheme = "light"
})

darkThemeButton.addEventListener("click", () => {
  html.style.colorScheme = "dark"
})

:root {
  transition: all 0.25s ease-out;
}
.container {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

<!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="style.css" />
    <script defer src="script.js"></script>
    <title>Transition</title>
  </head>
  <body>
    <div class="container">
      <section>
        <h1>Hello World</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa cum
          quia assumenda similique in eveniet porro beatae hic? Saepe, earum?
        </p>
      </section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem et
        nostrum ab nesciunt iusto dolore inventore expedita eveniet ullam maxime
        a excepturi blanditiis aliquid earum alias ex, saepe est modi.
      </p>
      <div class="theme-button-wraper">
        <button class="light-theme-button">Light</button>
        <button class="dark-theme-button">Dark</button>
      </div>
    </div>
  </body>
</html>

How do I transition background color with Tailwind CSS in React?

try use this in your component,

...
const [isScrolled, setIsScrolled] = useState(false);
...
  <header
    className={`h-16 z-10 fixed top-0 left-0 w-screen transition-all duration-200
          ${isScrolled ? "bg-white" : "bg-transparent"}`}
  >

and read this article to detect the correct scroll event.
Happy coding!

CSS transition between background image and background color

You can use this code:

Demo is here: https://output.jsbin.com/yadiwoviwe

.panel {
  position: relative;
  background: rgba(0,0,0,0) url(https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png) no-repeat center center / cover;
  width:200px;
  height:200px;
  transition: background-color 0.2s ease-in-out;
}
.panel:hover {
  background-color: rgba(0,0,0,.5);
}
.panel:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}