Responsive Foundation 6.0.0

Sidebar

Utilities » Mixins AnimationLink

Since: 1.0.0 New Issue

A mixin for animation. Takes care of browser prefixes for you. You should always use this mixin when writing animation rules to ensure you're compatible with the browsers we support. Use with keyframes to build complex animations that transition isn't capable of alone and to tightly control timing.

Accepts any valid CSS value for animation, including multiple animation declarations.

More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Examples

Create an infinite loading animation which completes every 250ms using keyframes and animation.
			@include keyframes( infinite-loader ) {
						from {
							transform: rotate( 0deg );
						}
						to {
							transform: rotate( 360deg );
						}
					}
		
					.loading {
					@include animation( infinite-loader 250ms infinite );
				}
		
Source: _mixins.scss, line 651 View Source