Animação de botão

Padrão

Pode diferir ligeiramente da interface real.

Ponto:
Define a animação para aplicar no estado Normal. Você pode ajustar a intensidade da direção constante.

O que muda com essa configuração:
Esse item tem um grande efeito sobre o tom Marcas porque o movimento é sempre visível.

Dica de ajuste:
Uma configuração suave que não prejudique a visibilidade ou a fadiga é recomendada para visualização prolongada.

Itens de configuração.

• Animação Predefinição Select: seleciona o tipo de animação da unidade principal Botão. Use em áreas onde você deseja aumentar o nível de atenção. As opções incluem nenhum (Nenhum) e várias animações constantes Padrão.

Observação: O Animação de botão difere do Texto e do Animação de ícone por ser sempre reproduzido (independentemente do Hover); embora o Botão seja o mais atraente, pois se move por toda parte, o uso excessivo pode levar a uma diminuição na qualidade geral da página e a um aumento nas taxas de abandono. Recomendado para uso em seções limitadas, como a primeira exibição de um LP; a duração do Padrão é de "2000 ms", a suavidade é de "entrada-saída" e o intervalo de loop é de "1000 ms".

Transição

<hr style="margin-top:60px"> <p style="font-size:12px;color:#999;">Total: 109 | Rendered: 109 | Skipped: 0</p><p class="docs-capture-placeholder__caption">実際と少し異なる場合があります。</p>

Ponto:
Define a velocidade e o intervalo de loop da animação do corpo do Botão; essa configuração controla o tempo de atenção da CTA.

O que muda com essa configuração:
Embora o corpo se mova e, portanto, seja altamente atraente, a configuração excessiva pode ser um fator de desinteresse.

Dica de ajuste:
Use em seções limitadas e mantenha as configurações baixas na página Normal para uso no mundo real.

Itens de configuração.

• Duração da animação (ms): duração de um ciclo de reprodução. A duração altera a calma da animação.
• Easing: tipo de alteração de velocidade, para ajustar o movimento natural do tipo CTA.
• Custom Value: valor Suavização personalizado. Especifique se o Predefinição existente não for adequado.
• Loop Interval (ms): Intervalo de loop. Cuidado para não torná-lo muito curto ou ele parecerá ruidoso.
• Reset: permite redefinir o conteúdo do Alterar para seu valor inicial e reajustá-lo novamente.

Observação: O Animação de botão e o Animação de moldura podem ser usados ao mesmo tempo, mas é recomendável moderar a direção de um deles quando usados juntos, pois podem facilmente se tornar visualmente incômodos quando ambos estão em execução.

Muitos Animação de botãos usam o transform do CSS (translateX, translateY, scale, rotate etc.); o Transform do Configurações de layout Translate e Skew da banda não entram em conflito direto com as camadas do aplicar, pois são diferentes, mas se o transform` for adicionado ao corpo do Botão com o PersonalizadoCSS, ele será sobrescrito durante a animação.

Na implementação atual, a supressão da animação Automático pela consulta prefers-reduced-motion Mídia é não executada. A animação ainda será reproduzida mesmo que o usuário tenha definido reduced-motion. Se forem necessárias considerações de acessibilidade, considere adicionar o CSS para suportar prefers-reduced-motion no lado do Tema.