Configurando animações
Slidde.co permite que você aplique animações padrão de keyframe CSS aos seus elementos da web facilmente. Aqui está um guia passo a passo para ajudá-lo a começar.
a Opção de Animação na barra lateral
- Selecione um Elemento: Clique em qualquer elemento na sua página.
- Abra o Modal Animação: Na barra lateral direita, clique no botão da aba Animações, você encontrará a opção Animação. Clique nela para abrir uma janela modal.
- Comece com Predefinições: Recomendamos começar com animações predefinidas, que você pode modificar posteriormente para atender às suas necessidades. Você pode clicar nos botões de predefinição para substituir por uma predefinição. Se você clicar no ícone de mais no botão, a predefinição será adicionada à animação atual.
Personalizando Animações
O modal de animação simplifica o processo de configuração de animações de keyframe CSS em uma interface de baixo código, tornando-o acessível mesmo se você não estiver familiarizado com codificação.
Animações de keyframe são onde você define as propriedades CSS para certas porcentagens. E o navegador lida com a transição para você.
Por exemplo, se você tiver keyframes como este com uma duração de 4 segundos.
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
O objeto se moverá 20px para baixo por 2 segundos, depois se moverá 20px para cima de volta à sua posição original por 2 segundos.
Se você encontrar algum problema ou quiser aprender mais sobre animações de keyframe:
- Pesquise Online: Pesquise suas perguntas específicas no Google; há muitos exemplos e recursos disponíveis.
- Tutorial de Keyframes CSS: Consulte o guia oficial de keyframes CSS no MDN para informações abrangentes.
Gatilho
Este campo controla quando a animação é reproduzida.
- Elemento mostrado: Este é o padrão. A animação será acionada quando o elemento for rolado para a visualização ou quando a seção que o contém for mostrada Seção de hash
- Elemento mostrado (repetir sempre): Igual ao acima, exceto que a animação será reproduzida cada vez que o elemento for mostrado.
- Página carregada: A animação será acionada quando a página for carregada.
Alvo(s)
Normalmente, você não precisa definir isso. O valor padrão é &, o que significa o elemento raiz.
No entanto, há alguns casos em que você precisará defini-lo.
Para animar o elemento Fundo avançado, você pode definir Alvo(s) para Primeiro elemento filho, já que o elemento Fundo avançado será sempre o primeiro filho do elemento raiz.
Para aplicar um atraso escalonado a todos os elementos filhos. Leia a seção Delay & staggering delay para mais detalhes.
Delay & staggering delay
Se você definir Atraso para 1000ms, a animação será executada após esperar por 1000ms.
Se você definir Escalonar para 50ms e definir os alvos para Todos os elementos filhos diretos. A animação será aplicada em cada um dos elementos filhos diretos, e esperará por
- primeiro elemento, 1000ms,
- segundo elemento, 1050ms,
- terceiro elemento, 1100ms,
- ...
Text staggering
Isso funciona para um componente Texto.
Se você definir Escalonar e definir os alvos para Todas as letras. O efeito escalonado será aplicado a cada letra.
Use a propriedade animation do css
Uma animação css simples está sempre disponível para todos os elementos em CSS. Mas você pode precisar ativar Disable in canvas para essa regra css específica para permitir uma edição mais fácil no editor.