Div background-color transition not working - html

Question

I have added transition to my buttons and it works fine
I have a div with width/height defined inline via props (react), the transition code looks very similar to the button so I'm unsure why it isn't wokring. For this example I just want a simple transition from a white background to red when you hover.
I have set the background color to white initially and :hover to red:
background-color: red;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
However this results in the expected result.. without any transition
I have tried changing the width on hover and setting tranisition: all 1s but it works without any transition again.. Why is this happening?
Thanks

Answer 1

Thanks for the fast responses. My apologies for the missing details. Turns out it was because the AOS (animation on scroll) library causes issues if doing transitions on the same element. I solved this by wrapping the div in another div.

Answer 2

It would help if you showed more of what you have on the hover, but I'm assuming that maybe you have the code set something like this:
.box{
background-color: red;
}
.box:hover{
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
}
It should be like this:
.box{
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}

Answer 3

Usually, the transition is given to the element.
Try this instead -
Css
div {
background-color: white;
transition: background-color 0.5s ease-in-out;
}
div:hover {
background-color: red;
}
Sass -
div {
background-color: white;
transition: background-color 0.5s ease-in-out;
&:hover {
background-color: red;
}
}

Answer 4

Try this, if set initially white to div background. Default it is white.
so, we can add transition , then hover the background change to red
CSS
.box{
transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
SCSS
.box{
transition: background-color 0.5s;
&:hover{
background-color: red;
}
}
Try this snippet.
.box{
transition: background-color 0.5s;
}
.box:hover{
background-color: red;
}
<div class="box" style="width:100vh;height:100vh;"></div>