Animación de botón

Predeterminado

Puede diferir ligeramente de la interfaz real.

Puntos:
define animación del botón en estado normal (always-on).

Qué cambia este ajuste:
es la animación con mayor impacto visual porque mueve el botón completo.

Consejo de ajuste:
úsala solo en secciones prioritarias (por ejemplo, primer CTA).

Elementos de configuración

• Selección de preajuste (none y patrones always-on).

se reproduce siempre, no solo en Hover. Un uso excesivo puede bajar calidad percibida y aumentar fatiga visual.

Transición

<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>

Puntos:
define velocidad y ritmo del bucle de animación del botón.

Qué cambia este ajuste:
controla equilibrio entre atención y molestia visual.

Consejo de ajuste:
deja valores suaves por defecto y refuerza solo en CTA clave.

Elementos de configuración

• Animation Duración (ms).
• Suavizado.
• Valor personalizado.
• Loop Interval (ms).
• Restablecer.

animación de botón y animación de marco pueden usarse juntas, pero conviene suavizar al menos una para evitar sobrecarga visual.

Conflicto de transform: muchas animaciones de botón usan transform. Si aplicas transform adicional al botón por CSS personalizado, puede sobrescribirse durante la animación.

prefers-reduced-motion no aplicado automáticamente: si necesitas soporte de accesibilidad, añade reglas CSS en el tema para reducir animaciones según esa media query.