Compass Animation
Provides a mixin for animation
and all its sub-properties.
See the CSS3 specification: animation.
This file can be imported using:
@import "compass/css3/animation"
Imports
- Browser Support – Provides configuration options for the Compass Browser Support Matrix.
Configurable Variables help
$animation-support-threshold
$graceful-usage-threshold
The prefixed support threshold for animation. Defaults to the $graceful-usage-threshold.
$default-animation-name
null
Name of any animation as a string.
$default-animation-duration
null
Duration of the entire animation in seconds.
$default-animation-delay
null
Delay for start of animation in seconds.
$default-animation-timing-function
null
The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
$default-animation-iteration-count
null
The number of times an animation cycle is played. [infinite | $number]
$default-animation-direction
null
Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
$default-animation-fill-mode
null
What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
$default-animation-play-state
null
Whether the animation is running or paused. [running | paused]
Mixins
view sourcekeyframes($name)
=keyframes($name, $deprecated-prefixes...) $warned: warn-about-useless-prefix-arguments($deprecated-prefixes...) +with-each-prefix(css-animation, $animation-support-threshold) // It would be nice if we could dynamically construct directive names. @if $current-prefix == -moz @-moz-keyframes #{$name} @content @if $current-prefix == -webkit @-webkit-keyframes #{$name} @content @if $current-prefix == -o @-o-keyframes #{$name} @content @if $current-prefix == -ms @-ms-keyframes #{$name} @content @if $current-prefix == null @keyframes #{$name} @content
@mixin keyframes($name, $deprecated-prefixes...) { $warned: warn-about-useless-prefix-arguments($deprecated-prefixes...); @include with-each-prefix(css-animation, $animation-support-threshold) { // It would be nice if we could dynamically construct directive names. @if $current-prefix == -moz { @-moz-keyframes #{$name} { @content; } } @if $current-prefix == -webkit { @-webkit-keyframes #{$name} { @content; } } @if $current-prefix == -o { @-o-keyframes #{$name} { @content; } } @if $current-prefix == -ms { @-ms-keyframes #{$name} { @content; } } @if $current-prefix == null { @keyframes #{$name} { @content; } } } }
Create a named animation sequence that can be applied to elements later.
$name - The name of your animation.
@content - The keyframes of the animation.
animation-name
=animation-name($name...) $name: set-arglist-default($name, $default-animation-name) +animation-properties((animation-name: $name))
@mixin animation-name($name...) { $name: set-arglist-default($name, $default-animation-name); @include animation-properties((animation-name: $name)); }
Apply any number of animation names.
animation-duration
=animation-duration($duration...) $duration: set-arglist-default($duration, $default-animation-duration) +animation-properties((animation-duration: $duration))
@mixin animation-duration($duration...) { $duration: set-arglist-default($duration, $default-animation-duration); @include animation-properties((animation-duration: $duration)); }
Apply any number of animation durations.
animation-delay
=animation-delay($delay...) $delay: set-arglist-default($delay, $default-animation-delay) +animation-properties((animation-delay: $delay))
@mixin animation-delay($delay...) { $delay: set-arglist-default($delay, $default-animation-delay); @include animation-properties((animation-delay: $delay)); }
Apply any number of animation delays.
animation-timing-function
=animation-timing-function($function...) $function: set-arglist-default($function, $default-animation-timing-function) +animation-properties((animation-timing-function: $function))
@mixin animation-timing-function($function...) { $function: set-arglist-default($function, $default-animation-timing-function); @include animation-properties((animation-timing-function: $function)); }
Apply any number of animation timing functions.
animation-iteration-count
=animation-iteration-count($count...) $count: set-arglist-default($count, $default-animation-iteration-count) +animation-properties((animation-iteration-count: $count))
@mixin animation-iteration-count($count...) { $count: set-arglist-default($count, $default-animation-iteration-count); @include animation-properties((animation-iteration-count: $count)); }
Apply any number of animation iteration counts.
animation-direction
=animation-direction($direction...) $direction: set-arglist-default($direction, $default-animation-direction) +animation-properties((animation-direction: $direction))
@mixin animation-direction($direction...) { $direction: set-arglist-default($direction, $default-animation-direction); @include animation-properties((animation-direction: $direction)); }
Apply any number of animation directions.
animation-fill-mode
=animation-fill-mode($mode...) $mode: set-arglist-default($mode, $default-animation-fill-mode) +animation-properties((animation-fill-mode: $mode))
@mixin animation-fill-mode($mode...) { $mode: set-arglist-default($mode, $default-animation-fill-mode); @include animation-properties((animation-fill-mode: $mode)); }
Apply any number of animation fill modes.
animation-play-state
=animation-play-state($state...) $state: set-arglist-default($state, $default-animation-play-state) +animation-properties((animation-play-state: $state))
@mixin animation-play-state($state...) { $state: set-arglist-default($state, $default-animation-play-state); @include animation-properties((animation-play-state: $state)); }
Apply any number of animation play states.
animation
=animation($animation...) $animation: if(length($animation) > 0, $animation, default-animation()) +animation-properties((animation: $animation))
@mixin animation($animation...) { $animation: if(length($animation) > 0, $animation, default-animation()); @include animation-properties((animation: $animation)); }
Shortcut to apply any number of animations to an element, with all the settings.
$animation... : Name and settings. [<values> | default]