From d6b170b8513dfddae4c5587289bcd309654c8c58 Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Wed, 25 Nov 2009 17:32:15 -0700 Subject: [PATCH] css3 transitions sass --- .../stylesheets/compass/css3/_transition.sass | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 lib/compass/frameworks/compass/stylesheets/compass/css3/_transition.sass diff --git a/lib/compass/frameworks/compass/stylesheets/compass/css3/_transition.sass b/lib/compass/frameworks/compass/stylesheets/compass/css3/_transition.sass new file mode 100644 index 00000000..5274e08a --- /dev/null +++ b/lib/compass/frameworks/compass/stylesheets/compass/css3/_transition.sass @@ -0,0 +1,57 @@ +// CSS Transitions +// Currently only works in Webkit +// - expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3 +// - we'll be prepared. + +// Override these defaults with your own, if you like +// - timing-function and delay are set to false for browser defaults (ease, 0s) +!default_transition_property ||= "all" +!default_transition_duration ||= 1s +!default_transition_function ||= false +!default_transition_delay ||= false + +// One or more properties to transition +// - for multiple, use a comma-delimited list +// - also accepts "all" or "none" +=transition-property(!properties = !default_transition_property) + transition-property = !properties + -webkit-transition-property = !properties + -moz-transition-property = !properties + -o-transition-property = !properties + +// One or more durrations in seconds +// - for multiple, use a comma-delimited list +// - these durrations will effect the properties in the same list position +=transition-duration(!duration = !default_transition_duration) + transition-duration = !duration + -webkit-transition-duration = !duration + -moz-transition-duration = !duration + -o-transition-duration = !duration + +// 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 +=transition-timing-function(!function = !default_transition_function) + transition-timing-function = !function + -webkit-transition-timing-function = !function + -moz-transition-timing-function = !function + -o-transition-timing-function = !function + +// 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 +=transition-delay(!delay = !default_transition_delay) + transition-delay = !delay + -webkit-transition-delay = !delay + -moz-transition-delay = !delay + -o-transition-delay = !delay + +// Transition all-in-one shorthand +=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)