La animación de rebote suave se puede hacer con la ayuda de HTML y CSS . Generará resultados divertidos y deseados.
Para este proyecto, se necesita un div simple con bola de clase en la página HTML:
<div class="ball"></div>
Cambiaremos a CSS para la programación de animación. Ahora, Flexbox se usa para tener la pelota en el medio de la página y hacer que la pelota tenga un tamaño de 70 px por 70 px . Se puede tomar en cualquier tamaño a elección del usuario ya que determina el tamaño de la pelota.
body {
display: flex;
justify-content: center;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FF5722;
}
Aquí, justify-content: centerse utiliza para centrar la pelota horizontalmente. border-radius : 50%convierte el cuadrado en un círculo. background-color: #FF5722convierte el círculo en color naranja. Hay varias notaciones de código para recordar los colores.
Creación de fotogramas clave: los fotogramas clave en las animaciones CSS brindan un control completo sobre la animación. Uso simple de la palabra clave @keyframes seguida del nombre de la animación, es decir, pelota que rebota suavemente:
@keyframes smoothbounceball{
statements
}
Dentro del fotograma clave, use palabras clave desde y hasta para crear un punto de inicio y final para la animación.
@keyframes smoothbounceball{
from {/*starting*/}
to {/*ending*/}
}
A nuestro entender, podemos agregar valores iniciales y finales a la animación. Para crear un efecto de rebote, necesitamos transformar la ubicación de la pelota. transform permite modificar las coordenadas de un elemento dado. De ahí el fotograma clave final:
@keyframes smoothbounceball{
from { transform: translate3d(0, 0, 0);}
to { transform: translate3d(0, 200px, 0);}
}
Aquí, las funciones de translate3d toman tres entradas, el cambio en el eje tridimensional (x, y, z). Traducirá la pelota en ejes tridimensionales. Si la pelota quiere moverse hacia arriba y hacia abajo, la pelota debe trasladarse a lo largo del eje y.
Ejecutando el fotograma clave: dado que @keyframe ha sido creado, ahora debe ejecutarse. En el código mencionado anteriormente de .ball{ } , se debe agregar una línea siguiente:
.ball{
Given statements...
animation: bounce 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
La comprensión de la animación: la animación le dice al elemento de bola que use la regla de rebote de fotogramas clave dada y establece la duración de la animación en 0,5 segundos. Luego, al terminar, la dirección de la animación se alterna. Luego ejecuta la animación un número infinito de veces.
Pero no le gusta que la pelota rebote sino que se mueva hacia adelante y hacia atrás, hacia arriba y hacia abajo.
Por lo tanto, parece:
Esto se debe a que el tiempo de la animación está desactivado. Las animaciones están configuradas para simplificar , de forma predeterminada. Por lo tanto, para que parezca que la pelota está rebotando, la animación debe ser lenta al principio y acelerar en el medio y luego terminar lentamente.
Por lo tanto , la curva bezier se usa para personalizar los tiempos de animación. Por lo tanto el código:
.ball{
Given statements..
animation: bounce 0.5s cubic-bezier(0.5, 0.05, 1, 0.5);
}
Después de esto, la pelota muestra el efecto de rebote. Aquí está el código final:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FF5722;
animation: bounce 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
animation-iteration-count: infinite;
}
@keyframes bounce {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 200px, 0);
}
}
/* Prefix Support */
ball {
-webkit-animation-name: bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(
.5, 0.05, 1, .5);
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
-webkit-transform: translate3d(0, 200px, 0);
transform: translate3d(0, 200px, 0);
}
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por polokghosh53 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA