CSS3 Animation Cheat Sheet - Justin Aguilar

How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Add the animation stylesheet to the <head> element of your webpage: Replace css with the name of the directory where the animation stylesheet is. Add an animation class to the element you want animated: Replace slideUp with the desired animation class. For entrance animations, you need to make them invisible by adding the visibility: hidden property to the animated element: visibility: hidden; is used to hide elements before the animation is activated. The values for these animations are relative to the element's size. Adding effects Add jQuery to the <head> element of your webpage: Replace slideUp with an animation class.

CSShake Some CSS classes to move your DOM! The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Get started... $ git clone or $ bower install csshake $ npm i csshake or Download Center Download separated files for each shake animation, expanded or minified. cdnjs.com New Include the css file then apply classes to elements Some things you could add... 🙊 Freezed after Shake 🙈 Constant and stops on :hover The do-shake @mixin, and so on... The about, the idea, and the desire to hear from you to improve the code... I had to make a shake animation for a big project. Download Fork me on Github

Motion UI | Playground from ZURB Motion UI is a Sass library for quickly creating CSS transitions and animations. We originally bundled this code with Foundation for Apps, but we've souped it up, made it its own library, and open sourced it ahead of the launch of Foundation for Sites 6. Getting Started Install Motion UI with Bower or npm. bower install motion-ui --save npm install motion-ui --save Motion UI includes a bundle of pre-made effects as CSS classes. But where it really gets fun is creating your own effects. Transitions The core function of Motion UI is to transition components in and out. Show a Thing The Motion UI package includes a small JavaScript library to trigger these transitions. MotionUI.animateIn('#element', 'fade-in'); MotionUI.animateOut('#element', 'fade-out', function() { console.log('Transition done!') Transitions are highly customizable. @include mui-hinge( $state: in, $from: left, $axis: center, $perspective: 2000px, $turn-origin: from-back ); Animations Click me for a weird effect! Series Animations