When I apply a width-transition to a div element, the animation works perfectly. However, if I provide both height and width to the same div in CSS, the animation stops working. What could be the issue?
On hover, neither color nor animation changes. How can I apply common styling for all divs:
- Default styling
- Styling on hover
Check out this JS Fiddle example, and see snippet below:
#div2 {
/*Un-commenting the below part, fails the animation assigned to this div
width:100px;
height:50px;
*/
-webkit-transition:width 3s;
background-color:blue;
}
div {
width:100px;
height:50px;
background:red;
color:white;
font-weight:bold;
-webkit-transition:width 2s;
}
#div1 {
-webkit-transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
}
#div2 {
-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
div:hover {
width:300px;
color:black;
}