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.

AppGyver 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

10 Awesome Free Tools To Make Infographics Advertisement Who can resist a colourful, thoughtful venn diagram anyway? In terms of blogging success, infographics are far more likely to be shared than your average blog post. This means more eyeballs on your important information, more people rallying for your cause, more backlinks and more visits to your blog. In short, a quality infographic done well could be what your blog needs right now. Designing An Infographic Some great tips for designing infographics: Keep it simple! Ideas for infographic formats include: Timelines;Flow charts;Annotated maps;Graphs;Venn diagrams;Size comparisons;Showing familiar objects or similar size or value. Here are some great tutorials on infographic creation: Creating Your Infographic Plan and research.If required, use free software to create simple graphs and visualisations of data.Use vector graphic software to bring these visualisations into the one graphic. Free Online Tools For Creating Infographics Stat Planet Hohli Creately New York Times Many Eyes Wordle

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

CSS & HTML 5 explained NOTE: Last major update: May 28, 2011 While Safari, Firefox, Chrome and Opera all support versions of border images, they only support the shorthand version of that propery. At the time of this writing, they do not support the individual properties of border-image-repeat, border-image-slice, border-image-width, border-image-source, etc. In addition, they do not all support the same property and values the same way. Note: The properties link to the W3C specifications. The individual properties, values and browser support and quirks in Detail border-color The border-color property allows you to define the color of the border on elements upon which you are set a border. Property Values for border-color transparent | rgb(r, g, b) | #RGB (#fff) | #RRGGBB (#ffffff) | colorName (green) | rgba(r, g, b, a) | hsl(h, s%, l%) | hsla(h, s%, l%, a) | inherit | currentColor Browser support for border-color Browser quirks in rendering border-color document.getElementById("myID").style.borderColor border-style