Tengo un problema con animaciones en Chrome, estoy haciendo animaciones en CSS que se activan al cargar la página, pero en Chrome a veces se hace borrosa. Adjunto un par de imágenes y mi código:
Esta es la imagen borrosa, mientras la animación se activa
Esta es la página cuando la animación ya está completa
HTML:
<div class="menuback">
<img src="img/menuback.svg" alt="">
</div>
CSS:
.menuback {
width: 4.297%;
height: 3%;
position: absolute;
display: flex;
right: -2%;
bottom: 48.6%;
transform: scale(12.9) translateX(0) translateY(0);
animation-name: blowmenuback;
animation-duration: 2s;
}
.menuback img{
width: 100%;
height: 100% !important;
}
@keyframes blowmenuback {
from {transform: scale(0) translateX(0) translateY(0);}
to {transform: scale(12.9) translateX(0) translateY(0);}
}