Compass Transition

Provides a mixin for CSS3 transitions. See CSS3 Spec: transitions.

This file can be imported using: @import "compass/css3/transition"

View the Source for this module on Github.

Examples

Transition
css3 mixin for css transitions

Imports

The following sass files are automatically imported when you import this file:

  1. CSS3 Utilities

Configurable Variables help

Value
all
Description

CSS Transitions Currently only works in Webkit.

  • expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3
  • We’ll be prepared.

Including this submodule sets following defaults for the mixins:

$default-transition-property : all
$default-transition-duration : 1s
$default-transition-function : false
$default-transition-delay    : false

Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s).

Value
1s

Value
false

Value
false

Mixins

View Source: Sass | SCSS 

=transition-property($properties: $default-transition-property)
  +experimental(transition-property, unquote($properties), -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin transition-property($properties: $default-transition-property) {
  @include experimental(transition-property, unquote($properties), -moz, -webkit, -o, not -ms, not -khtml, official); }

One or more properties to transition

  • for multiple, use a comma-delimited list
  • also accepts “all” or “none”
View Source: Sass | SCSS 

=transition-duration($duration: $default-transition-duration)
  @if type-of($duration) == string
    $duration: unquote($duration)
  +experimental(transition-duration, $duration, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin transition-duration($duration: $default-transition-duration) {
  @if type-of($duration) == string {
    $duration: unquote($duration); }
  @include experimental(transition-duration, $duration, -moz, -webkit, -o, not -ms, not -khtml, official); }

One or more durations in seconds

  • for multiple, use a comma-delimited list
  • these durations will affect the properties in the same list position
View Source: Sass | SCSS 

=transition-timing-function($function: $default-transition-function)
  +experimental(transition-timing-function, unquote($function), -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin transition-timing-function($function: $default-transition-function) {
  @include experimental(transition-timing-function, unquote($function), -moz, -webkit, -o, not -ms, not -khtml, official); }

One or more timing functions

  • [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)]
  • For multiple, use a comma-delimited list
  • These functions will effect the properties in the same list position
View Source: Sass | SCSS 

=transition-delay($delay: $default-transition-delay)
  @if type-of($delay) == string
    $delay: unquote($delay)
  +experimental(transition-delay, $delay, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin transition-delay($delay: $default-transition-delay) {
  @if type-of($delay) == string {
    $delay: unquote($delay); }
  @include experimental(transition-delay, $delay, -moz, -webkit, -o, not -ms, not -khtml, official); }

One or more transition-delays in seconds

  • for multiple, use a comma-delimited list
  • these delays will effect the properties in the same list position
View Source: Sass | SCSS 

=transition($properties: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay)
  +transition-property($properties)
  +transition-duration($duration)
  @if $function
    +transition-timing-function($function)
  @if $delay
    +transition-delay($delay)

@mixin transition($properties: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay) {
  @include transition-property($properties);
  @include transition-duration($duration);
  @if $function {
    @include transition-timing-function($function); }
  @if $delay {
    @include transition-delay($delay); } }

Transition all-in-one shorthand