Animation Utilities
The Animation Utilities in zenCSS provide a way to easily add animations to your elements. These utilities include predefined keyframes and classes for common animations such as blinking, sliding, and fading. Below is a list of the available animation utilities along with a brief explanation of each.
Fade Animations
The fade animations create a series of classes with different animation delays. The classes range from
.fade-in-1 to .fade-in-10, each with increasing delay intervals.
Button Hover Animation
The .btn-hover class applies a slight upward translation to a button element when hovered.
Blink Animation
The .blink class applies a blinking animation to the element. The animation makes the element alternate between fully
opaque and fully transparent.
Fade On View Animations
The fade on view animations create a fade in effect when the content becomes visable in the viewport. The class
.fade-in will trigger the animation on any element.
Breathe Animations
The breathe animations create a expanding and contracting effect when applied to an element. The class
.breathe will trigger the animation, as seen above or on the home page hero.
Card Animations
The card animations provide a hover animation for cards. Use
card-hover or card-pan on the column. See Example.
The Zen Test
Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.
So you can be assured it "just works". Try it out below.