I’m trying to change background on body via JavaScript. Most of the info online use CSS :hover style transitions. What I want is doing it via JavaScript. The background-Color changes without animation, even when I have added transition. Why?
```auto
body {
background-color: silver;
color: white;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
transition: background-color 29s ease-in;
}
document.body.style.backgroundColor = "red";
```
---
I like to think of it like this:
state 1 e.g. `.open{}`
state 2 e.g. `.closed{}`
The transition is between the two “states” or `selectors`.
Lets say you want to transition something 2s to open 2s to close.
You would have to apply the transition to both open and close selectors.
Transitions need both a value change and a CSS selector change to work.
In the above code you haven’t changed the `class or selector` just the `color` and by using JS directly on the element you have effectively “in-lined” the color so it kind of like doing ` `
You’ve got 3 options:
-add the transition to your change on the element e.g.
```auto
document.body.style = "background-color: red;
transition: background-color 29s ease-in"
```
-add a CSS class and change the body class e.g
```auto
.redBody{ background-color: red;
transition: background-color 29s ease-in;}
document.body.classList.add('redBody')
```
- use WAAPI (web animations api)
```auto
document.body.animate([ { background-color: silver, easing: 'ease-in' },
{ background-color: red, easing: 'ease-in' },
],
{duration: 29000, fill: 'forwards'});
```
---
BTW, it’s probably no big deal for a 29s animation, but if your doing fast animations directly on the element its probably best to use requestAnimationFrame e.g
```auto
window.requestAnimationFrame(() =>
document.body.style = "background-color: red;
transition: background-color 29s ease-in"
)
```
WAAPI does RAF by default apparently.
I think you still need to use it for classList changes.
I mostly use WAAPI or transitions now. WAAPI is pretty performant. 🙂
---
Applying this does not initiate the animation from silver til red:
```auto
document.body.style = "background-color: red;
transition: background-color 29s ease-in;"
// Not working either
.fadeBG{ background-color: red;
transition: background-color 29s ease-in;}
document.body.classList.add('fadeBG')
```
---
My bad `document.body.style` is read only
try:
`document.body.setAttribute("style", "background-color: blue; transition: background-color 29s ease-in");`
```auto
.fadeBG{ background-color: red;
transition: background-color 29s ease-in;}
```
This won’t work because `body.style.backgroundColor = 'black'`
The inline style is more specific than a ‘class’
You either set on the `element` or go `class` all the way 🙂
---
I just opened up your doc in Chrome and in the console pasted in that, then hit enter
`document.body.setAttribute("style", "background-color: blue; transition: background-color 29s ease-in")`
and it turned blue after a while…
The class change wont work unless you remove:
`body.style.backgroundColor = isDarkmodeTime ? "black" : "white";`
`"inline"` styles on the `element` have more CSS specificity than anything except `!important;`
---
I personally would not set the `` with JS.
You could try using `CSS custom properties (vars)` and set those with JS so you can still use `class` without `!important`
I modified your code to work with CSS custom properties.
```auto
Test
hello world
```
Just run that and it should be kind of what your after 🙂
---
Thanks for the help but the animation does not load on page load/refresh. I have to add a button listener for it to animate. Something similar to @kirupa web animation book chapter 6 where you click a button to apply js animations. I guess I can add an event listener for onLoad and add the fadeIn animation.
---
Yeah like @kirupa said just use a simple animation.
If you want to do night mode just use `css vars` like above.
That way you are setting them on the `` / `root` and you don’t have to put your script in the body.
They should work fine with your animation.
The `vars` will do the changes before the body loads so you shouldn’t get a FOUC. 🙂
---
Check out the source on the main [kirupa.com](http://kirupa.com) site on how dark mode is done. You’ll see a giant list of css vars at the very top. The script for loading the right set of vars runs before the rest of the page renders (just above the `body` element), and that ensures there is no FOUC with only a very small slowdown in rendering time since JS is running before the page can start displaying.
---
While in the process of recording a video on generating random colors, I stumbled upon another approach that I used for animating something with a transition on page load: [kirupa/simple\_random\_color\_changer.htm at master · kirupa/kirupa · GitHub](https://github.com/kirupa/kirupa/blob/master/animations/simple_random_color_changer.htm)
I use an empty CSS keyframes rule to trigger the **animationiteration** event!
---