Attempting to create an animation for the transform of a div.
Below is the code with transition and transform properties in Safari:
#mydiv{
transition: all 2.3s cubic-bezier(1, 0, 0, 1);
transform: scale(0.5);
background:white;
padding:30px;
}
.visible-popup{
transform: scale(1) !important;
}
The div does not initially have the visible-popup class, and I am using jQuery's addClass method to add it. However, the scaling jumps to 100% without animating. Interestingly, manually toggling the class property in Chrome or manipulating the DOM in the inspector leads to a smooth animation. Why doesn't it animate when switching the class programmatically?