Responsive Foundation 6.0.0

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

Accepts any valid CSS value for keyframes. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

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 );
				}