0

Es posible que tras finalizar una animación personalizada con keyframes pueda cambiar las propiedades de un elemento (¿Es posible sin usar JS?).

Por ejemplo, al finalizar una animación pasar a display: none; para ocultar el elemento.

Por el contrario, partir en display: none; y terminar en un display: block; para que el elemento quede visible permanentemente tras la animación.

Hablo de la propiedad display a modo de ejemplo, mi consulta es un poco más general ya que quisiera saber si es posible modificar otras propiedades de elemento como width, height, etc.

div#jeje{
    -webkit-animation: custom 1s ease-out;
    -ms-animation: custom 1s ease-out;
    -o-animation: custom 1s ease-out;
    animation: custom 1s ease-out;
  }

  @keyframes custom {
    0%{
        transform: rotateY(0deg);
    }

    50%{
        transform: rotateY(180deg);
        box-shadow: 0px 20px 50px -20px #888888;
    }
    100%{
      transform: rotateY(0deg);
    }
  }

2 respuestas 2

2

Puede usar:

animation-fill-mode

para definir que valors tendrá el elemento al finalizar la animación

0

Con animation-fill-mode: forwards; mantengo el ultimo estado de la animación.

div#jeje{
    min-height: 100px;
    max-height: 100px;
    min-width: 100px;
    max-width: 100px;
    background-color: yellow;
    transition: all 3s ease;
    -webkit-animation: custom 1s linear;
    -ms-animation: custom 1s linear;
    -o-animation: custom 1s linear;
    animation: custom 1s linear;
    animation-fill-mode: forwards;
  }

@keyframes custom {
    from,0%{
        transform: rotateY(0deg);
        transform: translateX(0px);
    }

    50%{
        transform: rotateY(180deg);
        box-shadow: 0px 20px 50px -20px #888888;
    }
    90%{
      background-color: yellow;
      transform: rotateY(0deg);
      opacity: 1;
    }
    to{
      opacity: 0;
    }
  }

Podría hacer que acabe la animación en 99% y el 100% serian mis nuevas reglas css (deben ser atributos con valores numéricos).

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.