Looping for Animation SassConf :D Hi! Mara Evangelina Ferreira - I love CSS Animation with Sass Why Sass? Animation with CSS can be Well, try animating gradients. Animating with Sass Maintainable Automated Faster DRY Prepros Live-Preview Set up & Files+ Prepros || Codepen || Your favorite compiler Loops! But before that A Short Recap Variables Conditional Mixins Loops For While HSL / RGB Variables To store information Variables To save information for later Its content will change It needs a name to identify it Variables in Sass $name: value; Variables in Sass $name: value; $main-color: #BADA55; $alt-color: #C0FFEE; $duration: 5s; Variables in Sass $name: value; $main-color: #BADA55; $alt-color: #C0FFEE; $duration: 5s; or $duration: 5; $duration + s; Conditionals If this then that. Conditionals Conditionals in something > this { this { that } Conditionals in Sass Mixins Group CSS declarations for later use With optional arguments Mixins Mixins result Mixins for prefixes Loops For & While Loops For: I know how many times While: I dont know how many times Or better explained In The Big Bang Theory Loops in The Big Bang Therory Loops in $this > 10{ // this repeats $i from 1 through 10{ // this repeats } Loops in Sass -> For loop Loops in Sass -> While loop HSL & RGB! Because colors are great! Colors in RGB Red/Green/Blue It can get confusing. Color with HSL Colors with HSL Hue/Chroma (0-360) Saturation (0-100%) Lightness (0-100%) Colors in HSL $hue: random(360); background-color: hsl($hue, 60%, 65%); // Try to keep the same Saturation and Lightness Color with HSL Pastel colors: (0-360), (~70%), (~80%) Color with HSL Pastel colors: (0-360), (~70%), (~80%) From cyan to blue: random(130/140) Lets try that! 1_colors/ + HSL /2_simple_loop_menu Tip To write a little less Shorthand CSS animation-name: show; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: ease; animation-iteration-count: infinite; animation-play-state: paused; Sass (also works in scss) animation: name: show duration: 1s fill-mode: forwards timing-function: ease iteration-count: infinite play-state: paused This Delays in equal elements ul li:nth-child(15) a{ Different color in each Animation-delay is different and incrementable } Delays with CSS: Get it better Part $i from 1 through 5 ul li:nth-child(#{$i}) a animation-delay: 0.5s Part 2 $delay: $i from 1 through 5 ul li:nth-child(#{$i}) a animation-delay: $delay + s $delay: $delay + 0.5 Now the colors! Color in HSL HSL Hue (0-360) Saturation(0-100%) Lightness (0-100%) Pastel colors: (0-360), (~70%), (~80%) From cyan to blue: random(130/140) Part 3 $delay: $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 in SVG! About animation in SVG Have you ever animated SVG? SVG + Looping /3_loop_svg The flower The SVG 6 petals -> Paths in a group #petals Each petal with a.petal class 1 center ->.center class External CSS The flower The SVG Lets work! flower.scss Same with a tree 4/tree_and_bird Transform-origin Transform-Origin You can measure with Photoshop or a similar tool Need to be an absolute value (~Firefox 41/43) Some Transform-Origins Rainbow /5_rainbow From red to red Round the chroma circle in From 0 to 360 HSL -> We modify only Hue Which goes from 0 to 360 degrees But We should fit those 360 degrees in our 100% keyframes values Lets forget about Sass (for now!) I mean rainbow{ 0%{ color: hsl(0, 60%, 60%); } 1%{ color: hsl(1, 60%, 60%); } 2%{ color: hsl(2, 60%, 60%); } } Besides the hassle, Its not possible to fit 360 in 100 this way. can take values with decimals too. rainbow{ 0%{ color: hsl(0, 60%, 60%); } 0.5%{ color: hsl(1, 60%, 60%); } 1%{ color: hsl(2, 60%, 60%); } } This way we can fit more colors (in fact, we can fit all the 360 degrees) We only need to know how to fit them Cross-Multiplication to the rescue! Find the right number X 1 * 100 / 360 = Now rainbow{ 0%{ color: hsl(0, 60%, 60%); } 0.279%{ color: hsl(1, 60%, 60%); } 0.558%{ color: hsl(2, 60%, 60%); } } Thats how we fit all the 360 degrees So we create our SCSS loop! SVG Unicorn /6_unicorn Timing-Functions Ease (default) Ease-in Ease-in-out Ease-out Linear Cubic-Bezier() Steps() Cubic-Bezier() Ease (default) Ease-in Ease-in-out Ease-out Linear Steps() Timing-Functions (IMHO) Cubic-Bezier() Ease (default) Ease-in = Gravity Ease-in-out Ease-out Linear = Means constant velocity (no acceleration) Steps() Check them out! /7_basic_timing_functions More timing options Progress over time Some cool timings by Firefox Dev Tools Save your timing- functions (because defaults are not enough!) /8_timing-functions Save timing-functions In a partial file and import it for future projects Or simply at the beginning for this one. Stop-Motions With the steps() timing-function Stop-Motions Using steps() To create stop-motion animations/9_steps Example Wings with steps 5070px wide 318px height 12 frames 5070/12 = 422px each frame This is our window Stop-Motions with Mixins /10_smiles