My Website has a CSS animation that creates a hover effect on a button.
While the animation looks good in Chrome and IE, I encountered an issue with Firefox.
https://i.sstatic.net/y2po7.png
Some white pieces are still visible after hovering.
Here is the Animation CSS:
.Hotel:hover{
animation-name: pulse;
animation-duration: 1s;
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(100.10, 10.10, 10.10);
transform: scale3d(100.10, 10.10, 10.10);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.80, 1.80, 1.80);
transform: scale3d(1.80, 1.80, 1.80);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}