¿Cómo mover un div hacia arriba y hacia abajo infinitamente en CSS3?

Te sugerimos que pruebes esta respuesta en un ambiente controlado antes de enviarlo a producción, un saludo.

Puede ajustar el tiempo de la @keyframes como sigue:

.object 
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;


@keyframes MoveUpDown 
  0%, 100% 
    bottom: 0;
  
  50% 
    bottom: 100px;
  

  hello world!

EDITAR

Como se señala en un comentario a continuación usando transform se prefiere para animaciones de alto rendimiento.

.object 
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;


@keyframes MoveUpDown 
  0%, 100% 
    transform: translateY(0);
  
  50% 
    transform: translateY(-100px);
  

  hello world!

Arriba/Abajo con animación

div 
        -webkit-animation: action 1s infinite  alternate;
        animation: action 1s infinite  alternate;
    
    @-webkit-keyframes action 
        0%  transform: translateY(0); 
        100%  transform: translateY(-10px); 
    
    @keyframes action 
        0%  transform: translateY(0); 
        100%  transform: translateY(-10px); 
    

↓

Arriba y abajo:

div 
        -webkit-animation: upNdown 2s infinite linear;
        animation: upNdown 2s infinite linear;
    
@-webkit-keyframes upNdown 
         0%  
         50%  transform: translate(-5px); 
         100%  
    
@keyframes upNdown 
         0%  
         50%  transform: translate(-5px); 
         100%  
    

Sección de Reseñas y Valoraciones

Si entiendes que ha resultado provechoso nuestro post, nos gustaría que lo compartas con otros juniors y nos ayudes a dar difusión a nuestro contenido.

---

---

Utiliza Nuestro Buscador