Tome_ Tome_ - 16 days ago 6
CSS Question

css transition: background-color and width 'cancel' each other?

I'm trying to change div background-color and width on mouse hover. However, can't make it both work, changing bg-color works but changing width in 3 sec does not. CSS code:

div {
background-color:gold;
width:100px;
transition: width 3s ease;
transition: background-color 3s ease;
}

div:hover{
background-color:#f00;
width:200px;
}


Fiddle:https://jsfiddle.net/f61ashbu/
How can I solve this problem?

Answer

Use CSS transition:3s ease;

see snippet

div {
    background-color:gold;
    width:100px;       
    transition:3s ease;
}

div:hover{
    background-color:#f00;
    width:200px;  
  }
<div>
  Lorem...
</div>