Como manter o estado final da animação CSS3 inalterado

introdução

A animação CSS3 traz efeitos dinâmicos ricos ao web design, tornando a página mais vívida e atraente. No entanto, às vezes queremos que a animação permaneça no seu estado final quando terminar, em vez de retornar ao seu estado inicial. Este artigo apresentará várias maneiras de obter esse efeito e garantir que a animação permaneça nesse estado quando a ação terminar.

Método 1: use animation-fill-mode

A propriedade animation-fill-mode é usada para controlar o estilo da animação antes e depois da reprodução. Ao definir esta propriedade, você pode obter o efeito de manter o estado final quando a animação terminar.

valor do atributo

Exemplo

 .elemento {
  animação: facilidade de entrada do myAnimation 2;
  modo de preenchimento de animação: avança;
}
@keyframes minhaAnimação {
  0% {
    transformar: traduzirX(0);
  }
  100% {
    transformar: traduzirX(100px);
  }
}

Neste exemplo, o elemento .element permanecerá no estado transform: translateX(100px) após o término da animação.

Método 2: usar evento animationend

Ao ouvir o evento animationend por meio de JavaScript, você pode definir manualmente o estilo do elemento quando a animação termina para manter o estado final da animação.

Exemplo

 <div class="elemento"></div>

 .elemento {
  largura: 100px;
  altura: 100px;
  cor de fundo: vermelho;
  animação: facilidade de entrada do myAnimation 2;
}
@keyframes minhaAnimação {
  0% {
    transformar: traduzirX(0);
  }
  100% {
    transformar: traduzirX(100px);
  }
}

 elemento const = document.querySelector('.element');
element.addEventListener('animationend', () => {
  element.style.transform = 'translateX(100px)';
});

Neste exemplo, quando a animação termina, o código JavaScript define a propriedade transform do elemento como translateX(100px) , mantendo assim o estado final da animação.

Método 3: use o atributo transition

Embora a propriedade transition seja usada principalmente para efeitos de transição, ao usá-la de maneira inteligente, você também pode obter o efeito de manter o estado final quando a animação termina.

Exemplo

 <div class="elemento"></div>

 .elemento {
  largura: 100px;
  altura: 100px;
  cor de fundo: vermelho;
  transição: transformação 2s facilidade de entrada;
}
.element.animate {
  transformar: traduzirX(100px);
}

 elemento const = document.querySelector('.element');
element.classList.add('animar');

Neste exemplo, ao adicionar a classe animate , a propriedade transform do elemento transita de seu estado inicial para translateX(100px) e permanece nesse estado após o término da transição.

Resumir

Manter o estado final de uma animação CSS3 inalterado pode ser alcançado de várias maneiras, incluindo usando animation-fill-mode , ouvindo animationend e usando a propriedade transition . Cada método tem seus cenários aplicáveis ​​e os desenvolvedores podem escolher o método apropriado de acordo com necessidades específicas.

Espero que este artigo possa fornecer uma compreensão clara e orientação prática para ajudá-lo a aplicar melhor a animação CSS3 no desenvolvimento real e obter os efeitos dinâmicos necessários.

Isso conclui este artigo sobre como manter o estado final da animação CSS3 inalterado. Para obter mais informações sobre como manter o estado final da animação CSS3 inalterado, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. faça isso no futuro.