Lighting Fly

SCSSMixinsLibrary

Transitions

In this module you can find standard mixins for prefix-free transition property and pre-defined mixins for special cases.

File

lightingfly/modules/_transitions.scss

Links

Specification for CSS 3 transitions: w3.org
Learn to CSS 3 transitions: w3schools.com

transition

Mixin for prefix-free using shorthand transition property.

Mixin

@mixin transition($arguments...)

Arguments

  • $arguments...:
    [color 0.3s, ...]
    - shorthand properties for each CSS property separated by comma.

Usage example

Demo 
 
Simple transition of background color on hover.
Hover me!
transition-property
 Mixin for prefix-free using transition-property property.
Mixin
@mixin transition-property($properties...)
Arguments
  • $properties...: 
    [color, background, ...]
    - names of CSS properties separated by comma.
Usage example
Demo 
 
First element has simple background transition, second element is extended with transition for color and box-shadow.
Other mixins used in demo: box-shadow
Hover me!
Or hover me!
transition-duration
 Mixin for prefix-free using transition-duration property.
Mixin
@mixin transition-duration($durations...)
Arguments
  • $durations...: 
    [1s, 500ms, ...]
    - durations of transitions separated by comma
Usage example
Demo 
 
Duration on mousein is set to 150ms but duration on mouseout is set to 2s.
Other mixins used in demo: box-shadow
Hover me and watch!
transition-timing-function
 Mixin for prefix-free using transition-timing-function property.
Mixin
@mixin transition-timing-function($functions...)
Arguments
  • $functions...: 
    [linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(1,1,1,1)]
    - timing functions for transitions separated by comma
Usage example
Demo 
 
These three elements have three diferent timing functions for transition
Linear!
Ease!
Custom!
transition-delay
 Mixin for prefix-free using transition-delay property.
Mixin
@mixin transition-delay($delays...)
Arguments
  • $delays...: 
    [1s, 500ms, ...]
    - delays of transitions separated by comma
Usage example
Demo 
 
CSS property visibility is delayed on mouseout.
Other mixins used in demo: opacity
Hover me!Look I'm tooltip.
transition-fix
 You can use this mixin if you need to fix "transition glitch" in Chrome.
Mixin
@mixin transition-fix()
Usage example