All Projects → Martz90 → Vivify

Martz90 / Vivify

Licence: mit
Vivify is free CSS animation library.

Programming Languages

CSS
56736 projects

Projects that are alternatives of or similar to Vivify

Dynamic.css
🚀 Awesome Library of CSS3 animations 🎉
Stars: ✭ 38 (-97.7%)
Mutual labels:  css3, css3-animations, animation-library
css-collection
🧙‍♂️ CSS芸人への道(CSSでつくったもの集)| I want to be CSS Magician
Stars: ✭ 82 (-95.03%)
Mutual labels:  css3, css-animations, css3-animations
web-animation-club
CSS controlled animations with transitionEnd, onTransitionEnd, animationend, onAnimationEnd events and frame throwing. Tiny javascript library with cross-browser methods to handle css animation/transition callbacks and event loop frame throwing. 📚🖥️📱
Stars: ✭ 52 (-96.85%)
Mutual labels:  css3, css-animations, animation-library
Landing-Page-Animation
Landing page animation made using CSS
Stars: ✭ 45 (-97.27%)
Mutual labels:  css3, css-animations, css3-animations
react-awesome-loaders
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
Stars: ✭ 146 (-91.16%)
Mutual labels:  css3, animation-library
learn-css-animation
Learn CSS animation with fun. It is simple, easy to use, and fun to learn.
Stars: ✭ 54 (-96.73%)
Mutual labels:  css3, css-animations
ComoFazerUmaPerguntaPT
🤔 Farto de fazer perguntas e não ser respondido? Aprenda agora a melhor forma de fazer uma pergunta 🔥
Stars: ✭ 28 (-98.3%)
Mutual labels:  helper, helpers
Tuesday
A quirky CSS Animation Library by Shakr
Stars: ✭ 446 (-72.99%)
Mutual labels:  animation-library, css-animations
30diasDeCSS
Desafio criar 30 mini projetos utilizando HTML e CSS em 30 dias, participe também!
Stars: ✭ 38 (-97.7%)
Mutual labels:  css3, css3-animations
You Need To Know Css
💄CSS tricks for web developers~
Stars: ✭ 3,777 (+128.77%)
Mutual labels:  css3, css-animations
Agilejs
AgileJS - The Css3 Creation Engine 🍖🌭🍔
Stars: ✭ 489 (-70.38%)
Mutual labels:  css3, css-animations
MERN-BUS-APP
This is a MFRP (My first Real Project) assigned to me during my internship at Cognizant. Made with MERN Stack technology.
Stars: ✭ 92 (-94.43%)
Mutual labels:  css3, css-animations
smoothr
A custom React router that leverages the Web Animations API and CSS animations.
Stars: ✭ 28 (-98.3%)
Mutual labels:  css-animations, animation-library
Magic
CSS3 Animations with special effects
Stars: ✭ 7,253 (+339.31%)
Mutual labels:  css3, css3-animations
Logging Helpers
Basic template helpers for printing messages out to the console. Useful for debugging context in templates. Should work with any template engine.
Stars: ✭ 5 (-99.7%)
Mutual labels:  helper, helpers
React Native Helpers
All helpers in one; iPhone series support, dimensions helper, hasNotch helper, normalize text helper and text helpers for React Native with very easy useEasy to use & awesome helpers for React Native.
Stars: ✭ 31 (-98.12%)
Mutual labels:  helper, helpers
Morphext
A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css.
Stars: ✭ 384 (-76.74%)
Mutual labels:  css3, css-animations
Morphist
A simple, high-performance and cross-browser jQuery slider / slideshow / carousel plugin for child objects powered by Animate.css.
Stars: ✭ 60 (-96.37%)
Mutual labels:  css3, css-animations
css3-animation-generator
chrome plugin css3 animation generator
Stars: ✭ 93 (-94.37%)
Mutual labels:  css3, css3-animations
Styled Map
A super simple way to map props to styles with Styled Components ✨
Stars: ✭ 582 (-64.75%)
Mutual labels:  helper, helpers

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].