Lighting Fly

SCSSMixinsLibrary

Animations

In this module you can find standard mixins for prefix-free animations properties and keyframes.

File

lightingfly/modules/_animations.scss

Links

Specification for CSS 3 animations.: w3.org
Another specification for CSS 3 animations: msdn.microsoft.com
Learn to CSS 3 animations: w3schools.com

keyframes

Mixin for prefix-free using of keyframes for animations

Mixin

@mixin keyframes($name){ @content }

Arguments

  • $name:
    [string]
    - keyframe name

  • @content:
    [text]
    - keyframe selectors with CSS properties.

Usage example

Demo 
 
Elements with 2 diferent keyframes.
Other mixins used in demo: animation
From to
Percentages
animation
 Mixin for prefix-free using shorthand animation property.
Mixin
@mixin animation($arguments...)
Arguments
  • $arguments...: 
    [animation 10s linear, ...]
    - shorthand properties for each CSS property separated by comma.
Usage example
Demo 
 
Two different animations.
Im animated
animation-name
 Mixin for prefix-free using animation-name property.
Mixin
@mixin animation-name($names...)
Arguments
  • $names...: 
    [String]
    - names of animations separated by comma.
Usage example
Demo 
 
Simple animation.
green - orange
blue - orange
animation-duration
 Mixin for prefix-free using animation-duration property.
Mixin
@mixin animation-duration($durations...)
Arguments
  • $duration...: 
    [0s, 100ms, ...]
    - durations of animations separated by comma.
Usage example
Demo 
 
One animation with different duration.
Other mixins used in demo: transform,  box-shadow
1s
10s
animation-timing-function
 Mixin for prefix-free using animation-timing-function property.
Mixin
@mixin animation-timing-function($timings...)
Arguments
  • $timings...: 
    [ease, linear, ...]
    - timing functions for animations separated by comma.
Usage example
Demo 
 
One animation with different timing function.
Other mixins used in demo: transform
linear
ease
animation-delay
 Mixin for prefix-free using animation-delay property.
Mixin
@mixin animation-delay($delays...)
Arguments
  • $delays...: 
    [0s, 1s, 2000ms]
    - delays for animations separated by comma.
Usage example
Demo 
 
Animation created with different delays.
Other mixins used in demo: transform,  border-radius
 
 
animation-iteration-count
 Mixin for prefix-free using animation-iteration-count property.
Mixin
@mixin animation-iteration-count($iteration-counts...)
Arguments
  • $iteration-counts...: 
    [1, 3, infinite, ...]
    - iteration-counts for animations separated by comma.
Usage example
Demo 
 
First element will animate infinite, second will animate twice.
Other mixins used in demo: border-radius
animation-direction
 Mixin for prefix-free using animation-direction property.
Mixin
@mixin animation-direction($directions...)
Arguments
  • $directions...: 
    [normal, reverse, alternate, alternate-reverse]
    - directions for animations separated by comma.
Usage example
Demo 
 
First element has normal direction, second has reverse.
Other mixins used in demo: transform
normal
reverse
animation-fill-mode
 Mixin for prefix-free using animation-fill-mode property.
Mixin
@mixin animation-fill-mode($fill-modes...)
Arguments
  • $fill-modes...: 
    [none, forwards, backwards, both]
    - fill-modes for animations separated by comma.
Usage example
Demo 
 
First element has none fill-mode, second has both.
Other mixins used in demo: transform
animation-play-state
 Mixin for prefix-free using animation-play-state property.
Mixin
@mixin animation-play-state($play-states...)
Arguments
  • $play-states...: 
    [running, paused]
    - play-states for animations separated by comma.
Usage example
Demo 
 
Play or pause element animation by clicking on it.
Other mixins used in demo: transform