Animando con sass
Descargar como PPTX, PDF0 recomendaciones545 vistas
Este documento presenta tres técnicas para animar con Sass: 1) Utilizar la propiedad Animation para escribir código CSS de animación de manera más concisa; 2) Usar el bucle @for para aplicar delays incrementales a elementos; y 3) Generar colores aleatorios en HSL para lograr efectos pasteles dinámicos.
Animando con sass
- 1. Animando con Sass María Evangelina Ferreira - @evaferreira92 BA Front-End – Septiembre 2015
- 2. El compilador • Prepros • Live-Preview
- 3. Animar con CSS … limita.
- 5. Shorthand
- 6. Escribir menos: CSS animation-name: mostrar; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: ease; animation-iteration-count: infinite; animation-play-state: paused; Sass animation: name: mostrar duration: 1s fill-mode: forwards timing-function: ease iteration-count: infinite play-state: paused
- 7. ¡Tip 2! Delays y bucle @for
- 8. Esto
- 9. Delays en elementos comunes • ul li:nth-child(1…5) a{ Color distinto a cada uno Animation-delay distinto e incrementable en c/u }
- 10. Delays con CSS:
- 11. Mejoras @for
- 12. Parte 1 @for $i from 1 through 5 ul li:nth-child(#{$i}) a animation-delay: 0.5s
- 13. Parte 2 $delay: 0.5 @for $i from 1 through 5 ul li:nth-child(#{$i}) a animation-delay: $delay + s $delay: $delay + 0.5
- 14. ¡Tip 3! Colores en HSL
- 15. Parte 3 $delay: 0.5 @for $i from 1 through 5 ul li:nth-child(#{$i}) a animation-delay: $delay + s $hue: random(360) background-color: hsl($hue, 60%, 65%) $delay: $delay + 0.5
- 16. Color en HSL • El color en HSL • Hue/Tono/Croma (0-360°) • Saturación (0-100%) • Lightness (0-100%) Colores pasteles: (0-360°), (~70%), (~80%) De cyan a azul: 140 + random(140)
- 17. ¡Conclusión! • Animation: para ser menos redundante (: • @for para manejar delays e incrementarlos de forma constante • Go crazy with HSL