Configuración de animaciones
Slidde.co te permite aplicar fácilmente animaciones de fotogramas clave CSS estándar a tus elementos web. Aquí tienes una guía paso a paso para ayudarte a comenzar.
la Opción de Animación en la barra lateral
- Selecciona un Elemento: Haz clic en cualquier elemento de tu página.
- Abre el Modal Animación: En la barra lateral derecha, haz clic en el botón de la pestaña Animaciones, encontrarás la opción Animación. Haz clic para abrir una ventana modal.
- Comienza con Preajustes: Recomendamos comenzar con animaciones preestablecidas, que luego puedes modificar según tus necesidades. Puedes hacer clic en los botones de preajustes para reemplazar con un preajuste. Si haces clic en el icono de más en el botón, el preajuste se añadirá a la animación actual.
Personalizando Animaciones
El modal de animación simplifica el proceso de configurar animaciones de fotogramas clave CSS en una interfaz de bajo código, haciéndolo accesible incluso si no estás familiarizado con la codificación.
Las animaciones de fotogramas clave son donde defines las propiedades CSS para ciertos porcentajes. Y el navegador maneja la transición por ti.
Por ejemplo, si tienes unos fotogramas clave como este con una duración de 4 segundos.
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
El objeto se moverá 20px hacia abajo durante 2 segundos, luego se moverá 20px hacia arriba de nuevo a su posición original durante 2 segundos.
Si encuentras algún problema o quieres aprender más sobre las animaciones de fotogramas clave:
- Busca en Línea: Googlea tus preguntas específicas; hay muchos ejemplos y recursos disponibles.
- Tutorial de Fotogramas Clave CSS: Consulta la guía oficial de fotogramas clave CSS en MDN para obtener información completa.
Disparador
Este campo controla cuándo se reproduce la animación.
- Elemento mostrado: Este es el predeterminado. La animación se activará cuando el elemento se desplace a la vista o la sección que lo contiene se muestre Sección hash
- Elemento mostrado (repetir cada vez): Igual que el anterior, excepto que la animación se reproducirá cada vez que el elemento se muestre.
- Página cargada: La animación se activará cuando la página se cargue.
Objetivo(s)
Normalmente no necesitas configurarlo. El valor predeterminado es &, lo que significa el elemento raíz.
Sin embargo, hay algunos casos en los que necesitarás configurarlo.
Para animar el elemento Fondo avanzado, puedes establecer Objetivo(s) en Primer elemento hijo, ya que el elemento Fondo avanzado siempre será el primer hijo del elemento raíz.
Para aplicar un retraso escalonado a todos los elementos hijos. Lee la sección Retraso y retraso escalonado para más detalles.
Retraso y retraso escalonado
Si configuras Retraso a 1000ms, la animación se reproducirá después de esperar 1000ms.
Si configuras Escalonar a 50ms y estableces los objetivos en Todos los elementos hijos directos. La animación se aplicará a cada uno de los elementos hijos directos, y esperará
- primer elemento, 1000ms,
- segundo elemento, 1050ms,
- tercer elemento, 1100ms,
- ...
Escalonamiento de texto
Esto funciona para un componente Texto.
Si configuras Escalonar y estableces los objetivos en Todas las letras. El efecto escalonado se aplicará a cada letra.
Usar la propiedad animation de css
Una animación css simple siempre está disponible para todos los elementos en CSS. Pero es posible que necesites activar Disable in canvas para esa regla css específica para permitir una edición más fácil en el editor.