Pause & Loop CSS Animations com WAIT! Animar
Há muita coisa que você pode fazer com animação CSS pura, mas pausar e repetir uma animação não é possível com a atual especificação W3.
Mas com uma ferramenta gratuita como ESPERAR! Animar você pode realmente crie animações em loop a partir do zero com atrasos personalizados entre cada loop. Isso pode parecer uma tarefa mundana, mas resolve um problema para muitos desenvolvedores.
Deve-se notar que existe uma propriedade CSS chamada atraso de animação qual atrasa o começar de uma animação CSS. No entanto não afeta uma animação repetida como só atrasa o ponto de partida.
ESPERAR! Animar calcula automaticamente quantas pausas precisam ser colocadas dentro de quadros-chave de animação personalizados para crie a duração exata da pausa você precisa entre loops. Isso poderia ser feito à mão, mas é extremamente convolvido, para não mencionar super chato.
Este aplicativo da web pode trabalhar com qualquer recurso de animação CSS3, incluindo rotações e transformações. Você não está escrevendo novas propriedades CSS, mas sim construindo em cima do recurso keyframes para criar pausas com base em percentuais (de 0% a 100%) dentro da animação.
Confira a home page para ver alguns exemplos em ação. Está bem claro o que você pode fazer e o código-fonte está ali para copiar / colar em seu próprio trabalho.
Por favor note que isto é não é uma biblioteca completa. É um gerador que cria seu código CSS on-the-fly com base no que você precisa para o atraso da animação.
Se você quer uma solução mais simples fora do local, então você pode baixar o Sass mixin. Isso é um pouco mais complicado porque requer um mapa Sass, então você precisa entender como adicionar propriedades personalizadas e escrever sua sintaxe corretamente.
Aqui está um exemplo de como você ligue para o mixin:
@include waitAnimate ((animationName: animName, quadros-chave: (0: (transformar: escala (1), cor de fundo: azul), 50: (transformar: escala (2), cor de fundo: verde), 100: (transformar : escala (3), cor de fundo: vermelho)), duração: 2, waitTime: 1, timingFunction: ease, iterationCount: infinite));
Pro desenvolvedores web não devem ter problemas em aprender as cordas e construir isso em uma mixagem reutilizável. Mas os desenvolvedores novatos podem ter dificuldade para fazê-lo funcionar, por isso o aplicativo da Web.
Tudo isso Código fonte está disponível gratuitamente no GitHub se você quiser baixar uma cópia localmente. Mas como esse é um recurso tão estranho, não é algo que você provavelmente precisará em muitos projetos. É por isso que o WAIT! O aplicativo da web animado deve ser mais do que suficiente para ajudá-lo resolver um problema único do atrasando animações em loop com CSS puro.
É um truque muito divertido que também é bastante obscuro pelo design. Mas isso mostra o quanto é possível com CSS3 e um pouco de criatividade.
