Source on Github

Compass Transition

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

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

Examples

Transition
css3 mixin for css transitions

Imports

  1. Shared Utilities

Configurable Variables help

all

CSS Transitions Currently only works in Webkit.

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

1s

false

false

transform, transform-origin

Functions

view source 

@function comma-list($list: ())
  @return join((), $list, comma)

@function comma-list($list: ()) {
  @return join((), $list, comma);
}

coerce a list to be comma delimited or make a new, empty comma delimited list.

view source 

@function prefixed-for-transition($prefix, $property)
  @if type-of($property) == list
    $new-list: comma-list()
    @each $v in $property
      $new-list: append($new-list, prefixed-for-transition($prefix, $v))
    @return $new-list
  @else
    @if index($transitionable-prefixed-values, $property)
      @return #{$prefix}-#{$property}
    @else
      @return $property

@function prefixed-for-transition($prefix, $property) {
  @if type-of($property) == list {
    $new-list: comma-list();
    @each $v in $property {
      $new-list: append($new-list, prefixed-for-transition($prefix, $v));
    }
    @return $new-list;
  }
  @else {
    @if index($transitionable-prefixed-values, $property) {
      @return #{$prefix}-#{$property};
    }
    @else {
      @return $property;
    }
  }
}

Returns $property with the given prefix if it is found in $transitionable-prefixed-values.

view source 

@function is-time($value)
  @if type-of($value) == number
    @return not not index(s ms, unit($value))
  @else
    @return false

@function is-time($value) {
  @if type-of($value) == number {
    @return not not index(s ms, unit($value));
  }
  @else {
    @return false;
  }
}

Checks if the value given is a unit of time.

Mixins

view source 

=transition-property($property-1: $default-transition-property, $property-2: false, $property-3: false, $property-4: false, $property-5: false, $property-6: false, $property-7: false, $property-8: false, $property-9: false, $property-10: false)
  @if type-of($property-1) == string
    $property-1: unquote($property-1)
  $properties: compact($property-1, $property-2, $property-3, $property-4, $property-5, $property-6, $property-7, $property-8, $property-9, $property-10)
  @if $experimental-support-for-webkit
    -webkit-transition-property: prefixed-for-transition(-webkit, $properties)
  @if $experimental-support-for-mozilla
    -moz-transition-property: prefixed-for-transition(-moz, $properties)
  @if $experimental-support-for-opera
    -o-transition-property: prefixed-for-transition(-o, $properties)
  transition-property: $properties

@mixin transition-property($property-1: $default-transition-property, $property-2: false, $property-3: false, $property-4: false, $property-5: false, $property-6: false, $property-7: false, $property-8: false, $property-9: false, $property-10: false) {
  @if type-of($property-1) == string {
    $property-1: unquote($property-1);
  }
  $properties: compact($property-1, $property-2, $property-3, $property-4, $property-5, $property-6, $property-7, $property-8, $property-9, $property-10);
  @if $experimental-support-for-webkit {
    -webkit-transition-property: prefixed-for-transition(-webkit, $properties);
  }
  @if $experimental-support-for-mozilla {
    -moz-transition-property: prefixed-for-transition(-moz, $properties);
  }
  @if $experimental-support-for-opera {
    -o-transition-property: prefixed-for-transition(-o, $properties);
  }
  transition-property: $properties;
}

One or more properties to transition

view source 

=transition-duration($duration-1: $default-transition-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false)
  @if type-of($duration-1) == string
    $duration-1: unquote($duration-1)
  $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10)
  +experimental(transition-duration, $durations, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin transition-duration($duration-1: $default-transition-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false) {
  @if type-of($duration-1) == string {
    $duration-1: unquote($duration-1);
  }
  $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
  @include experimental(transition-duration, $durations, -moz, -webkit, -o, not -ms, not -khtml, official);
}

One or more durations in seconds

view source 

=transition-timing-function($function-1: $default-transition-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false)
  $function-1: unquote($function-1)
  $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10)
  +experimental(transition-timing-function, $functions, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin transition-timing-function($function-1: $default-transition-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false) {
  $function-1: unquote($function-1);
  $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
  @include experimental(transition-timing-function, $functions, -moz, -webkit, -o, not -ms, not -khtml, official);
}

One or more timing functions

view source 

=transition-delay($delay-1: $default-transition-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false)
  @if type-of($delay-1) == string
    $delay-1: unquote($delay-1)
  $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10)
  +experimental(transition-delay, $delays, -moz, -webkit, -o, not -ms, not -khtml, official)

@mixin transition-delay($delay-1: $default-transition-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false) {
  @if type-of($delay-1) == string {
    $delay-1: unquote($delay-1);
  }
  $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
  @include experimental(transition-delay, $delays, -moz, -webkit, -o, not -ms, not -khtml, official);
}

One or more transition-delays in seconds

view source 

=single-transition($property: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay)
  +transition(compact($property $duration $function $delay))

@mixin single-transition($property: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay) {
  @include transition(compact($property $duration $function $delay));
}

Transition all-in-one shorthand

view source 

=transition($transition-1: default, $transition-2: false, $transition-3: false, $transition-4: false, $transition-5: false, $transition-6: false, $transition-7: false, $transition-8: false, $transition-9: false, $transition-10: false)
  @if $transition-1 == default
    $transition-1: compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay)
  $transitions: false
  @if type-of($transition-1) == list and type-of(nth($transition-1, 1)) == list
    $transitions: join($transition-1, compact($transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10), comma)
  @else
    $transitions: compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
  $delays: comma-list()
  $has-delays: false
  $webkit-value: comma-list()
  $moz-value: comma-list()
  $o-value: comma-list()
  // This block can be made considerably simpler at the point in time that
  // we no longer need to deal with the differences in how delays are treated.
  @each $transition in $transitions
    // Extract the values from the list
    // (this would be cleaner if nth took a 3rd argument to provide a default value).
    $property: nth($transition, 1)
    $duration: false
    $timing-function: false
    $delay: false
    @if length($transition) > 1
      $duration: nth($transition, 2)
    @if length($transition) > 2
      $timing-function: nth($transition, 3)
    @if length($transition) > 3
      $delay: nth($transition, 4)
      $has-delays: true
    // If a delay is provided without a timing function
    @if is-time($timing-function) and not $delay
      $delay: $timing-function
      $timing-function: false
      $has-delays: true
    // Keep a list of delays in case one is specified
    $delays: append($delays, if($delay, $delay, 0s))
    $webkit-value: append($webkit-value, compact(prefixed-for-transition(-webkit, $property) $duration $timing-function))
    $moz-value: append($moz-value, compact(prefixed-for-transition(-moz, $property) $duration $timing-function $delay))
    $o-value: append($o-value, compact(prefixed-for-transition(-o, $property) $duration $timing-function $delay))
  @if $experimental-support-for-webkit
    -webkit-transition: $webkit-value
    // old webkit doesn't support the delay parameter in the shorthand so we progressively enhance it.
    @if $has-delays
      -webkit-transition-delay: $delays
  @if $experimental-support-for-mozilla
    -moz-transition: $moz-value
  @if $experimental-support-for-opera
    -o-transition: $o-value
  transition: $transitions

@mixin transition($transition-1: default, $transition-2: false, $transition-3: false, $transition-4: false, $transition-5: false, $transition-6: false, $transition-7: false, $transition-8: false, $transition-9: false, $transition-10: false) {
  @if $transition-1 == default {
    $transition-1: compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay);
  }
  $transitions: false;
  @if type-of($transition-1) == list and type-of(nth($transition-1, 1)) == list {
    $transitions: join($transition-1, compact($transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10), comma);
  }
  @else {
    $transitions: compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
  }
  $delays: comma-list();
  $has-delays: false;
  $webkit-value: comma-list();
  $moz-value: comma-list();
  $o-value: comma-list();
  // This block can be made considerably simpler at the point in time that
  // we no longer need to deal with the differences in how delays are treated.
  @each $transition in $transitions {
    // Extract the values from the list
    // (this would be cleaner if nth took a 3rd argument to provide a default value).
    $property: nth($transition, 1);
    $duration: false;
    $timing-function: false;
    $delay: false;
    @if length($transition) > 1 {
      $duration: nth($transition, 2);
    }
    @if length($transition) > 2 {
      $timing-function: nth($transition, 3);
    }
    @if length($transition) > 3 {
      $delay: nth($transition, 4);
      $has-delays: true;
    }
    // If a delay is provided without a timing function
    @if is-time($timing-function) and not $delay {
      $delay: $timing-function;
      $timing-function: false;
      $has-delays: true;
    }
    // Keep a list of delays in case one is specified
    $delays: append($delays, if($delay, $delay, 0s));
    $webkit-value: append($webkit-value, compact(prefixed-for-transition(-webkit, $property) $duration $timing-function));
    $moz-value: append($moz-value, compact(prefixed-for-transition(-moz, $property) $duration $timing-function $delay));
    $o-value: append($o-value, compact(prefixed-for-transition(-o, $property) $duration $timing-function $delay));
  }
  @if $experimental-support-for-webkit {
    -webkit-transition: $webkit-value;
    // old webkit doesn't support the delay parameter in the shorthand so we progressively enhance it.
    @if $has-delays {
      -webkit-transition-delay: $delays;
    }
  }
  @if $experimental-support-for-mozilla {
    -moz-transition: $moz-value;
  }
  @if $experimental-support-for-opera {
    -o-transition: $o-value;
  }
  transition: $transitions;
}