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.

Slide Animations

Slide animations can be applied to move elements up, down, left, or right. The corresponding classes are .slide-up, .slide-down, .slide-left, and .slide-right.

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.