Slide 8
Slide 8 text
C S S 3 Tr a n s i t i o n s
A N I M AT I O N S T H E C S S WAY
SCSS EXAMPLE
div {
@include single-‐transition( left, 200ms,
cubic-‐bezier(0.39, 0.575, 0.565, 1) );
}
CSS EXAMPLE
div {
-‐webkit-‐transition: left 200ms cubic-‐bezier(0.39, 0.575, 0.565, 1);
-‐moz-‐transition: left 200ms cubic-‐bezier(0.39, 0.575, 0.565, 1);
transition: left 200ms cubic-‐bezier(0.39, 0.575, 0.565, 1);
}
JQUERY (at the point you need the div animated)
$('div').css( {left: targetX} );
// .addClass()
(Note: vendor prefixes not required for latest browsers but use for optimal backwards and mobile compatibility.)