Configurando animações
Slidde.co permite que você aplique animações padrão de keyframes CSS aos seus elementos 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 da sua página.
- Abra o Modal Animação: Na barra lateral direita, role até o final onde você encontrará a opção Animação. Clique para abrir uma janela modal.
Usar Animações Predefinidas
- Comece com Predefinições: Recomendamos começar com animações predefinidas, que você pode modificar conforme suas necessidades.
- Encontre Mais Predefinições: Você pode encontrar uma lista de animações predefinidas em Animate.css. Se precisar de uma animação específica, nos avise, e podemos adicioná-la à lista.
Personalizar Animações
O modal de animação simplifica o processo de configuração de animações de keyframes CSS em uma interface de baixo código, tornando-o acessível mesmo se você não estiver familiarizado com programação.
Animações de keyframes 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 assim 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 keyframes:
- Pesquise Online: Procure 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.
Animando elementos filhos
Você pode direcionar os filhos do elemento raiz definindo Targets para &>*.
Atraso escalonado
Se você alterar o atraso para os seguintes valores, um efeito escalonado será aplicado.
targets: &>*
delay: anime.stagger(100) // aumenta o atraso em 100ms para cada elemento.
targets: &>*
delay: anime.stagger(100, {start: 500}) // o atraso começa em 500ms e depois aumenta em 100ms para cada elemento.
Para mais exemplos, por favor, veja aqui Noções básicas de escalonamento
Usar a propriedade animation do css
Uma animação css simples está sempre disponível para todos os elementos em Estilos personalizados. Mas você pode precisar ativar Desativar no canvas para essa regra css específica para permitir uma edição mais fácil no editor.