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
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 stacks allow 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 Animate stack also allows you to trigger animations on hover, click and page scroll.
The Animate Timing swatch allows you to control the timing of multiple animations from a single location. There is also a powerful Animate swatch as a part of the Swatch Pack that give you even more control over your animations than the default Animate stack.
On Scroll
On Hover
On Click
Animation Preview
Use the select box below to preview the animations available.
Choose an animation in order to preview it
This field is requiredVideo Tutorials
Below are video tutorials that are relevant to the stacks used on this page.