5

Tengo el siguiente código:

<html>
<head>
<style> 
#pruebamov {
  width: 120px;
  background-color: coral;
  color: white;
  animation: pruebamov 3s 3;
}

@keyframes pruebamov {
  50% {width: 100%;}
}
</style>
</head>
<body>

<div id="pruebamov">
  <h1>Hola</h1>
</div>

</body>
</html>

Quiero conseguir que, a la 3ª vez que se realice el movimiento, se quede ahí.

Me explico, Cuando se hace el movimiento del inicio al fin, cuando lo haga la 3ª y última vez, se quede en el final del movimiento en vez de volver al inicio.

He probado toqueteando algunas cosas, pero ha causado el efecto contrario. No sé cómo podría conseguir esto.

3 respuestas 3

6

Una manera de hacerlo sólo con CSS y cambiando el código lo mínimo sería jugando con los parámetros de la animación. Principalmente:

  • animation-fill-mode indicará qué quieres que suceda cuando termine la animación. Por defecto vuelve a la posición especificada en CSS, pero pueden cambiarse los valores para que termine con el último frame de la animación (forwards) o el primero (backwards).
  • animation-direction permite indicar en que dirección quieres que se ejecute la animación, por defecto es hacia adelante (normal) pero puedes hacer que se ejecute hacia atrás (reverse) o en ambas direcciones (alternate o alternate-reverse).
  • animation-timing-function: permite indicar la función de tiempos que ajusta la velocidad en diferentes momentos de la animación. Por defecto empieza "lento", se acelera en el medio y se hace lento al final (ease), pero puedes hacer que empiece lento y sólo se acelere (ease-in), o que vaya todo a la misma velocidad (linear) o que vaya rápido al principio y lento al final (ease-out)... hay bastantes opciones.

Así cambiando un poco la animación puedes:

  • Hacer que el punto final sea el 100% del ancho en lugar del 50%:

    @keyframes pruebamov {
      100% {width: 100%;}
    }
    
  • Indicar que quieres que se alternen las direcciones:

    animation-direction: alternate;
    
  • Como quieres que crezca al 100%, se reduzca al tamaño original, crezca de nuevo, se reduzca de nuevo y finalmente vuelva al 100%, eso son 5 iteraciones. Y como antes la animación incluía las dos direcciones y duraba 3 segundos pero ahora es en cada dirección, debes ajustar el tiempo de la animación y su número de ejecuciones en consecuencia:

    animation: pruebamov 1.5s 5;
    
  • Quieres que la animación se mantenga en el estado final:

    animation-fill-mode: forwards;
    
  • Para terminar, . Para cambiar esto debes jugar un poco con los valores del easing:

    animation-timing-function: ease-in-out;
    

Con estos cambios el código se ve así:

<html>
<head>
<style> 
#pruebamov {
  width: 120px;
  background-color: coral;
  color: white;
  animation: pruebamov 1.5s 5;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@keyframes pruebamov {
  100% {width: 100%;}
}
</style>
</head>
<body>

<div id="pruebamov">
  <h1>Hola</h1>
</div>

</body>
</html>

Aunque la animación se parece, no es exactamente igual porque los tiempos y velocidades no coinciden. Deberías jugar un poco con los valores de animation-timing-function para que se ajuste perfecto.

6

No se me ocurre una manera de hacerlo solamente con CSS, ya que lo que necesitas es ejecutar algo cuando la animación termine (lo que se suele llamar un callback). Pero mediante Javascript (Jquery en mi ejemplo) podemos detectar cuando la animación ha terminado y entonces modificar la anchura del elemento para que se quede con el 100%.

El otro inconveniente es que lo que quieres hacer es parar tu animación al terminar el primer paso de los dos que consta (Primerpaso: agrandarse, Segundo paso: achicarse). Para ello puedes decirle a la animación que se ejecute dos veces y media (2.5).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<style> 
#pruebamov {
  width: 120px;
  background-color: coral;
  color: white;
  animation: pruebamov 3s 2.5;
  animation-fill-mode: forwards;
}

@keyframes pruebamov {
  50% {width: 100%;}
  100% {width: 120px;}
}
</style>
</head>
<body>

<div id="pruebamov">
  <h1>Hola</h1>
</div>

</body>
</html>

Editado

Editado para añadir una solución sin el uso de Javascript

3
  • ¡Perfecta! No podría pedir nada mejor ^^
    – Lucía
    el 24 ene. 2020 a las 12:02
  • 1
    Yo aquí pensando ¿cómo hacer que se termine en el medio? y complicando las cosas sobremanera... y tu respuesta es tan sencilla y limpia. Genial :)
    – Alvaro Montoro
    el 24 ene. 2020 a las 12:10
  • 1
    Me honra recibir una valoración positiva del maestro. La verdad es que prové esperando que no funcionase pero menuda sorpresa cuando tragó. ¡Gracias por el comentario! Me ha animado el día ^^
    – phpMyGuel
    el 24 ene. 2020 a las 12:12
3

Investigando más por la página encontré lo que buscaba (Estaba escondido en otra parte distinta).

Así es como ha quedado, aunque no descarto la respuesta de @phpMyGuel , ya que se perdió en este código el "efecto suave" que tenía al hacer el regreso.

<html>
<head>

<style>
.grid-container {
  display: grid;
  grid-gap: 5px;
  grid-template-areas:
    'uno dos'
    'uno tres'
    'uno cuatro'
    'cinco cinco';
  grid-template-columns: 30% 1fr;
  background-color: #CCBDFB;
  padding: 5px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 50px;
  font-size: 15px;
  font-family: Arial;
  text-align: left;
}

.uno {
    grid-area: uno;
}

.dos {
    grid-area: dos;
}

.tres {
    grid-area: tres;
}

.cuatro {
    grid-area: cuatro;
}

.cinco {
    grid-area: cinco;
}

#pruebadiv {
  width: 400px;
  background-color: coral;
  color: white;
  animation: pruebamov 3s 3;
  animation-fill-mode: forwards;
}

@keyframes pruebamov {
  from {width:100px; }
  to {width: 100%; }
}

</style>
</head>
<body>
<br><br><br>
<div class="grid-container">
  <div class="grid-item uno">
  Hola
  </div>
  <div class="grid-item dos">
   
  </div>
  <div class="grid-item tres">
  
  </div>  
  <div class="grid-item cuatro">
  
  </div>
  <div class="grid-item cinco">
  
  </div>
</div>
<div id="pruebadiv">
  <h1>Hola</h1>
</div>
</body>
</html>

Cambios:

Básicamente, lo que hice fue añadir la línea animation-fill-mode: forwards; en la parte css del div para que éste se mantenga en la misma posición en la que acaba.

Esto se indica con la siguiente línea a añadir:

@keyframes pruebamov {
  from {width:100px; }
  to {width: 100%; }
}

Que tiene que indicar dónde empieza el movimiento, y dónde termina.

3
  • Me picaste a seguir trasteando y encontré un modo de hacerlo solamente con CSS mezclando tu solución con la mía :)
    – phpMyGuel
    el 24 ene. 2020 a las 11:55
  • ¡Encantada de leerlo!
    – Lucía
    el 24 ene. 2020 a las 11:55
  • Edité mi respuesta para usar solamente CSS
    – phpMyGuel
    el 24 ene. 2020 a las 11:59

Tu Respuesta

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

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