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.
Slide animations can be applied to move elements up, down, left, or right. The corresponding classes are
The fade animations create a series of classes with different animation delays. The classes range from
.fade-in-10, each with increasing delay intervals.
Button Hover Animation
.btn-hover class applies a slight upward translation to a button element when hovered.
.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.
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.
The card animations provide a hover animation for cards. Use
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.