/Dynamic.css

Awesome Library of CSS3 animations

Primary LanguageCSS

Dynamic.css

Awesome Library of CSS3 animations

Special thanks to daneden's Animate.css and Christian's magic for inspiration.
You're amazing guys! 👍

Dynamic.css is a bunch of awesome, cross-browser CSS animations to use in any project.
It's perfect to animate incoming and leaving web page elements, but it also could be useful for sliders, :hover handlers and all kind of general use.

Basic Usage

  1. Include the stylesheet on your document's <head>
<head>
  <link rel="stylesheet" href="dynamic.css">
  
  <!-- Or, for the minified version: -->
  <link rel="stylesheet" href="dynamic.min.css">
</head>

  1. Add class dynamic to the element you want to animate. You may also want to include the class infinite for an infinite loop.

  2. Than you'll also have to add one of the following classes:

  • jump
  • blink
  • windyX
  • windyY
  • spinXUp
  • spinXDown
  • spinYLeft
  • spinYRight
  • spinZIn
  • spinZOut
  • materialize
  • vaporize

  • starWars
  • starWarsFrontUp
  • starWarsFrontDown
  • starWarsBackUp
  • starWarsBackDown

  • comeInLeft
  • comeInUp
  • comeInDown
  • comeInRight
  • comeOutLeft
  • comeOutUp
  • comeOutDown
  • comeOutRight

  • speedInLeft
  • speedInRight
  • speedOutLeft
  • speedOutRight

  • stairsInLeft
  • stairsIn
  • stairsInRight
  • stairsOutLeft
  • stairsOut
  • stairsOutRight

  • hopInLeft
  • hopIn
  • hopInRight
  • hopOutLeft
  • hopOut
  • hopOutRight

  • rollInLeft
  • rollInRight
  • rollOutLeft
  • rollOutRight

  • rollUpLeft
  • rollUpDown
  • rollUpRight
  • rollDownLeft
  • rollDownUp
  • rollDownRight

  • fallDownLeft
  • fallDownUp
  • fallDownDown
  • fallDownRight

  • roundOutLeft
  • roundOutRight
  • roundSlideLeft
  • roundSlideRight

License

Dynamic.css is licensed under the MIT license.