Q
Version: 1.0.1
Source on Github

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

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

$graceful-usage-threshold

The prefixed support threshold for animation. Defaults to the $graceful-usage-threshold.

null

Name of any animation as a string.

null

Duration of the entire animation in seconds.

null

Delay for start of animation in seconds.

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)]

null

The number of times an animation cycle is played. [infinite | $number]

null

Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]

null

What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]

null

Whether the animation is running or paused. [running | paused]

Mixins

view source

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
=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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@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.
view source

?
1
2
3
=animation-name($name...)
  $name: set-arglist-default($name, $default-animation-name)
  +animation-properties((animation-name: $name))
?
1
2
3
4
@mixin animation-name($name...) {
  $name: set-arglist-default($name, $default-animation-name);
  @include animation-properties((animation-name: $name));
}

Apply any number of animation names.

view source

?
1
2
3
=animation-duration($duration...)
  $duration: set-arglist-default($duration, $default-animation-duration)
  +animation-properties((animation-duration: $duration))
?
1
2
3
4
@mixin animation-duration($duration...) {
  $duration: set-arglist-default($duration, $default-animation-duration);
  @include animation-properties((animation-duration: $duration));
}

Apply any number of animation durations.

view source

?
1
2
3
=animation-delay($delay...)
  $delay: set-arglist-default($delay, $default-animation-delay)
  +animation-properties((animation-delay: $delay))
?
1
2
3
4
@mixin animation-delay($delay...) {
  $delay: set-arglist-default($delay, $default-animation-delay);
  @include animation-properties((animation-delay: $delay));
}

Apply any number of animation delays.

view source

?
1
2
3
=animation-timing-function($function...)
  $function: set-arglist-default($function, $default-animation-timing-function)
  +animation-properties((animation-timing-function: $function))
?
1
2
3
4
@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.

view source

?
1
2
3
=animation-iteration-count($count...)
  $count: set-arglist-default($count, $default-animation-iteration-count)
  +animation-properties((animation-iteration-count: $count))
?
1
2
3
4
@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.

view source

?
1
2
3
=animation-direction($direction...)
  $direction: set-arglist-default($direction, $default-animation-direction)
  +animation-properties((animation-direction: $direction))
?
1
2
3
4
@mixin animation-direction($direction...) {
  $direction: set-arglist-default($direction, $default-animation-direction);
  @include animation-properties((animation-direction: $direction));
}

Apply any number of animation directions.

view source

?
1
2
3
=animation-fill-mode($mode...)
  $mode: set-arglist-default($mode, $default-animation-fill-mode)
  +animation-properties((animation-fill-mode: $mode))
?
1
2
3
4
@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.

view source

?
1
2
3
=animation-play-state($state...)
  $state: set-arglist-default($state, $default-animation-play-state)
  +animation-properties((animation-play-state: $state))
?
1
2
3
4
@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.

view source

?
1
2
3
=animation($animation...)
  $animation: if(length($animation) > 0, $animation, default-animation())
  +animation-properties((animation: $animation))
?
1
2
3
4
@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]