SkillAgentSearch skills...

Vivify

Vivify is free CSS animation library.

Install / Use

/learn @Martz90/Vivify
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

Vivify Logo

Vivify web presentation

Vivify is free CSS animation library.

Usage

Simply include vivify css file into your document's <head>

<link href="vivify.min.css" rel="stylesheet" type="text/css"/>

Add class vivify to the element you want to animate. If you want your animation to be infinite, you can also add infinite class.

List of class names you can add

  • ball
  • blink
  • driveInBottom
  • driveInLeft
  • driveInRight
  • driveInTop
  • driveOutBottom
  • driveOutLeft
  • driveOutRight
  • driveOutTop
  • fadeIn
  • fadeInBottom
  • fadeInLeft
  • fadeInRight
  • fadeInTop
  • fadeOut
  • fadeOutBottom
  • fadeOutLeft
  • fadeOutRight
  • fadeOutTop
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • fold
  • hitLeft
  • hitRight
  • jumpInLeft
  • jumpInRight
  • jumpOutLeft
  • jumpOutRight
  • popIn
  • popInBottom
  • popInLeft
  • popInRight
  • popInTop
  • popOut
  • popOutBottom
  • popOutLeft
  • popOutRight
  • popOutTop
  • pullDown
  • pullLeft
  • pullRight
  • pullUp
  • pulsate
  • rollInBottom
  • rollInLeft
  • rollInRight
  • rollInTop
  • rollOutBottom
  • rollOutLeft
  • rollOutRight
  • rollOutTop
  • shake
  • spin
  • spinIn
  • spinOut
  • swoopInBottom
  • swoopInLeft
  • swoopInRight
  • swoopInTop
  • swoopOutBottom
  • swoopOutLeft
  • swoopOutRight
  • swoopOutTop
  • unfold

Preview all animations here

delay and duration classes

If you want to quickly change delay or duration you can just add delay- or duration- and number in ms.

Available times: 100,150 to 900,950 1000,1250,1500,1750 to 10000,10250,10500,10750

example: delay-2500 for 2.5 second delay. or duration-550 for 550 ms duration.

Related Skills

View on GitHub
GitHub Stars1.7k
CategoryDevelopment
Updated13d ago
Forks150

Languages

CSS

Security Score

100/100

Audited on Mar 17, 2026

No findings