While working on a static website, I attempted to apply a background-color transition to a button. Despite reviewing my code multiple times, I discovered that the issue was not with my coding. It seems like the browser is having trouble displaying CSS transitions correctly. Some animations do not occur at all, while others only show the initial and final stages after repeated clicks. I tested the same sites on different computers and determined that the problem lies with my browser.
I have cleared the cache and deleted cookies, but the problem persists. What steps can I take to resolve this issue?
EDIT: Below is the snippet of my code
<p id="more"><a href="#">Read more</a></p>
#more a {
display: block;
width: 100px;
padding: 5px 10px;
border-left: 2px solid #1bb2b2;
margin-top: 10px;
background-color: white;
transition: background-color 2s ease-in-out;
-moz-transition: background-color 2s ease-in-out;
-webkit-transition: background-color 2s ease-in-out;
-o-transition: background-color 2s ease-in-out;
}
#more:hover a { color: white; background-color: #1bb2b2;}
EDIT2: After switching to Firefox, the transitions on my site and other websites are functioning perfectly. The question now arises – what is causing my Chrome browser to malfunction?