Configuración de animaciones
Slidde.co te permite aplicar fácilmente animaciones estándar de keyframes CSS 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, desplázate hasta el final donde encontrarás la opción Animación. Haz clic para abrir una ventana modal.
Usar Animaciones Predefinidas
- Comienza con Predefinidos: Recomendamos comenzar con animaciones predefinidas, que puedes modificar según tus necesidades.
- Encuentra Más Predefinidos: Puedes encontrar una lista de animaciones predefinidas en Animate.css. Si necesitas una animación específica, háznoslo saber y podemos agregarla a la lista.
Personalizar Animaciones
El modal de animación simplifica el proceso de configurar animaciones de keyframes CSS en una interfaz de bajo código, haciéndolo accesible incluso si no estás familiarizado con la codificación.
Las animaciones de keyframes son donde defines las propiedades CSS para ciertos porcentajes. Y el navegador maneja la transición por ti.
Por ejemplo, si tienes unos keyframes 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 keyframes:
- Busca en Línea: Googlea tus preguntas específicas; hay muchos ejemplos y recursos disponibles.
- Tutorial de Keyframes CSS: Consulta la guía oficial de keyframes CSS en MDN para obtener información completa.
Animar elementos hijos
Puedes apuntar a los hijos del elemento raíz configurando Targets a &>*.
Retraso escalonado
Si cambias el retraso a los siguientes valores, se aplicará un efecto escalonado.
targets: &>*
delay: anime.stagger(100) // aumenta el retraso en 100ms para cada elemento.
targets: &>*
delay: anime.stagger(100, {start: 500}) // el retraso comienza en 500ms y luego aumenta en 100ms para cada elemento.
Para más ejemplos, por favor revisa aquí Conceptos básicos de escalonamiento
Usar la propiedad animation de css
Una animación css simple está siempre disponible para todos los elementos en Estilos personalizados. Pero puede que necesites activar Desactivar en canvas para esa regla css específica para permitir una edición más fácil en el editor.