Style Transitions

Foundation 6 allows you to transition the styles of any element from one state into another. This is mostly done on hover but can also be done on page load as well. This is accomplished with the Transition swatch.

There are literally an infinite amount of transitions you can do. It is supported with every single swatch. You can also mix and match multiple swatches to create interesting animations. Below are a handful of examples. Remember that your imagination are the limits of what you can do here. It's impossible for me to show everything that is possible.

Hover Examples

Header

Blob

Animated Underscore

Hover Gradient

Card Hover

This is a card

It has an easy to override visual style, and is appropriately subdued.

Card Hover

This is a card

It has an easy to override visual style, and is appropriately subdued.

Animations

The Animate stack allows you to animate components onto the page. The animations can be triggered on page load or as the user scrolls down the page. Scroll down the page to see some of the possibilities that you can do with this. The animations below have been staggered so that they don't all trigger at the same time. As you scroll down the page, you may need to pause to see the animations.

Video Tutorials

Below are video tutorials that are relevant to the stacks used on this page.

Loading...