0

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 ?

1
  • Hola!!! @NextByte. si quiere aprender bien sobre CSS y esa cosas, Entra w3schools. para que aprendas mas sobre lo que es las animaciones y Transiciones, también un montón de artículos sobre las tecnología web . Espero que te sirva amigo ;). otra cosa mas hay una librería muy chula sobre animaciones que le puedes dar a tus contenido que es animate el 13 feb. 2019 a las 18:37

2 respuestas 2

3

Usando scale logras lo mismo y no tienes que crear tantos pasos intermedios ya que el cálculo de los pasos intermedios es automático. El problema es que ya no puedes poner dimensiones en pixeles sino en proporción al tamaño original, por eso puse 0.16 que es al valor 1 aproximadamente lo mismo que 50px es a 300px. Lo otro es cambiar el origen de la transformación al borde superior izquierdo para que quede igual que si se hiciera manipulando el tamaño.

#box {
  width: 300px;
  height: 300px;
  background-color: blue;
  transform-origin: top left;
}

@keyframes animacion {
  0% {
    opacity: 0;
    transform: scale(1)
  }
  50% {
    opacity: 0.50;
    transform: scale(0.16)
  }
  100% {
    opacity: 1;
    transform: scale(1)
  }
}

#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>

0

algo que te puede ayudar mucho es usar la colección Hover.css esta en github la importas y usas las clases y bum tienes tu animación del elemento seleccionado.

1
  • Por favor edita tu respuesta añadiendo la información más importante del enlace y que pueda servir al OP. Ten presente que el enlace se puede romper y quedar inservible el 13 feb. 2019 a las 21:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.