Q
Version: 0.12.1
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.

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

1s

false

false

transform, transform-origin

Mixins

view source 

=transition-property($properties: $default-transition-property)
  @if type-of($properties) == string
    $properties: unquote($properties)
  +build-prefix-values(transition-property, $properties)

@mixin transition-property($properties: $default-transition-property) {
  @if type-of($properties) == string {
    $properties: unquote($properties); }
  @include build-prefix-values(transition-property, $properties); }

One or more properties to transition

  • for multiple, use a comma-delimited list
  • also accepts "all" or "none"
view source 

=transition-duration($duration: $default-transition-duration)
  @if type-of($duration) == string
    $duration: unquote($duration)
  +experimental(transition-duration, $duration, -moz, -webkit, -o, -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, -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 

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

@mixin transition-timing-function($function: $default-transition-function) {
  @include experimental(transition-timing-function, unquote($function), -moz, -webkit, -o, -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 

=transition-delay($delay: $default-transition-delay)
  @if type-of($delay) == string
    $delay: unquote($delay)
  +experimental(transition-delay, $delay, -moz, -webkit, -o, -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, -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 

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

@mixin single-transition($property: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay) {
  @include build-prefix-values(transition, compact($property $duration $function, false), $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)
  $transition: compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
  +build-prefix-values(transition, $transition)

@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); }
  $transition: compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
  @include build-prefix-values(transition, $transition); }
view source 

=build-prefix-values($property, $values, $delay: false)
  $raw-values: $values
  $index: compact(false)
  $webkit-value: compact(false)
  $moz-value: compact(false)
  $ms-value: compact(false)
  $o-value: compact(false)
  @each $value in $raw-values
    $value: compact(join($value, false))
    $match: false
    @each $prefixed-value in $transitionable-prefixed-values
      @if index($value, $prefixed-value)
        $index: index($value, $prefixed-value)
        $match: true
    @if $match
      $value-prefix: nth($value, $index)
      $value-suffix: compact(false)
      @for $i from 2 through length($value)
        $value-suffix: append($value-suffix, nth($value, $i), space)
      $non-webkit-suffix: compact(append($value-suffix, $delay, space))
      $webkit-value: append($webkit-value, compact(join(-webkit-#{$value-prefix}, $value-suffix)), comma)
      $moz-value: append($moz-value, compact(join(-moz-#{$value-prefix}, $non-webkit-suffix)), comma)
      $ms-value: append($ms-value, compact(join(-ms-#{$value-prefix}, $non-webkit-suffix)), comma)
      $o-value: append($o-value, compact(join(-o-#{$value-prefix}, $non-webkit-suffix)), comma)
    @else
      $non-webkit-value: compact(append($value, $delay, space))
      $webkit-value: append($webkit-value, $value, comma)
      $moz-value: append($moz-value, $non-webkit-value, comma)
      $ms-value: append($ms-value, $non-webkit-value, comma)
      $o-value: append($o-value, $non-webkit-value, comma)
  @if $experimental-support-for-webkit
    -webkit-#{$property}: $webkit-value
    @if $delay
      -webkit-#{$property}-delay: $delay
  @if $experimental-support-for-mozilla
    -moz-#{$property}: $moz-value
  @if $experimental-support-for-microsoft
    -ms-#{$property}: $ms-value
  @if $experimental-support-for-opera
    -o-#{$property}: $o-value
  #{$property}: compact($values $delay)

@mixin build-prefix-values($property, $values, $delay: false) {
  $raw-values: $values;
  $index: compact(false);
  $webkit-value: compact(false);
  $moz-value: compact(false);
  $ms-value: compact(false);
  $o-value: compact(false);
  @each $value in $raw-values {
    $value: compact(join($value, false));
    $match: false;
    @each $prefixed-value in $transitionable-prefixed-values {
      @if index($value, $prefixed-value) {
        $index: index($value, $prefixed-value);
        $match: true; } }
    @if $match {
      $value-prefix: nth($value, $index);
      $value-suffix: compact(false);
      @for $i from 2 through length($value) {
        $value-suffix: append($value-suffix, nth($value, $i), space); }
      $non-webkit-suffix: compact(append($value-suffix, $delay, space));
      $webkit-value: append($webkit-value, compact(join(-webkit-#{$value-prefix}, $value-suffix)), comma);
      $moz-value: append($moz-value, compact(join(-moz-#{$value-prefix}, $non-webkit-suffix)), comma);
      $ms-value: append($ms-value, compact(join(-ms-#{$value-prefix}, $non-webkit-suffix)), comma);
      $o-value: append($o-value, compact(join(-o-#{$value-prefix}, $non-webkit-suffix)), comma); }
    @else {
      $non-webkit-value: compact(append($value, $delay, space));
      $webkit-value: append($webkit-value, $value, comma);
      $moz-value: append($moz-value, $non-webkit-value, comma);
      $ms-value: append($ms-value, $non-webkit-value, comma);
      $o-value: append($o-value, $non-webkit-value, comma); } }
  @if $experimental-support-for-webkit {
    -webkit-#{$property}: $webkit-value;
    @if $delay {
      -webkit-#{$property}-delay: $delay; } }
  @if $experimental-support-for-mozilla {
    -moz-#{$property}: $moz-value; }
  @if $experimental-support-for-microsoft {
    -ms-#{$property}: $ms-value; }
  @if $experimental-support-for-opera {
    -o-#{$property}: $o-value; }
  #{$property}: compact($values $delay); }