Responsive Foundation 6.0.0

A mixin for transition. Takes care of browser prefixes for you. You should always use this mixin when writing transition rules to ensure you're compatible with the browsers we support. Supports multiple transitions, just use the same syntax as you would CSS. Please note: you should avoid trasition all, as it can become a significant performance issue on older devices. The cheapest properties to animate performance-wise are transform, opacity, and filter - if you're not sure what you're doing, it's best to stick to those where possible. Learn how to test animation performance: https://www.sitepoint.com/check-css-animation-performance-with-the-browsers-dev-tools/ Syntax info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Examples

Transition the opacity on a lightbox when it is opened.

			.lightbox-overlay {
					@include opacity( 0 );
					@include transition( opacity 250ms ease-in-out 0s );
		
					&.open {
						@include opacity( 1 );
						@include transition( opacity 250ms ease-in-out 0s );
					}
				}
		

Transition multiple properties between hidden and visible item states for a filter and ensure that certain properties are applied to the animation immediately using the step-start timing function. Note the delay on opacity.

			.degree-program-hidden {
					@include opacity( 0 );
					@include scale( 1, 0 );
					z-index: 1;
		
					@include transition(
						opacity 250ms ease-in-out .2s,
						transform 250ms ease-in-out 0s,
						z-index 0s step-start 0s
					);
				}
					.degree-program-visible {
					@include opacity( 1 );
					@include scale( 1, 1 );
					z-index: 2;
		
					@include transition(
						opacity 250ms step-end .2s,
						transform 250ms ease-out 0s,
						z-index 0s step-start 0s
					);
				}