estaba consultado como hacer animaciones simples pero llamativas con CSS e intente recrear una animación simple en la cual tenia un contenedor vació de 300px por 300px en donde quería que cuando el cursor estuviera encima presentara una animación de que se hacia mas pequeño el contenedor para posteriormente a la mitad de la animación empezar a volver a incrementar su tamaño hasta llegar a su opacidad y tamaño original. Código.
#box{
width: 300px;
height: 300px;
background-color: blue;
}
@keyframes animacion{
0%{ opacity: 0; width: 300px; height: 300px; }
5%{ opacity: 0.5; width: 275px; height: 275px; }
10%{ opacity: 0.1; width: 250px; height: 250px; }
15%{ opacity: 0.15; width: 225px; height: 225px; }
20%{ opacity: 0.20; width: 200px; height: 200px; }
25%{ opacity: 0.25; width: 175px; height: 175px; }
30%{ opacity: 0.30; width: 150px; height: 150px; }
35%{ opacity: 0.35; width: 125px; height: 125px; }
40%{ opacity: 0.40; width: 100px; height: 100px; }
45%{ opacity: 0.45; width: 75px; height: 75px; }
50%{ opacity: 0.50; width: 50px; height: 50px; }
55%{ opacity: 0.50; width: 50px; height: 50px; }
60%{ opacity: 0.55; width: 75px; height: 75px; }
65%{ opacity: 0.60; width: 100px; height: 100px; }
70%{ opacity: 0.65; width: 125px; height: 125px; }
75%{ opacity: 0.70; width: 150px; height: 150px; }
80%{ opacity: 0.75; width: 175px; height: 175px; }
85%{ opacity: 0.80; width: 225px; height: 225px; }
90%{ opacity: 0.85; width: 250px; height: 250px; }
95%{ opacity: 0.90; width: 275px; height: 275px; }
100%{ opacity: 0.95; width: 300px; height: 300px; }
}
#box:hover{
background: red;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-name: animacion;
animation-timing-function: linear;
animation-duration: 4s;
}
<div id="box"></div>
El código cumple hasta cierto punto con mis expectativas pero siento que queda poco elegante la definicion de la animación definida. ¿ Existe algún forma mas elegante de llegar a la misma animación ?