CSS Animation cheatsheet featuring Mr T.

A collection of awesome CSS animations featuring the super Mr T.

<html class="no-js" lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>CSS3 Animation Cheat Sheet - Justin Aguilar</title> <link href="https://www.justinaguilar.com/animations/css/reset.css" rel="stylesheet"> <link href="https://www.justinaguilar.com/animations/css/animations.css" rel="stylesheet"> <link href="https://www.justinaguilar.com/animations/css/style.css" rel="stylesheet"> <link href="https://www.justinaguilar.com/animations/css/novecentowide_demibold/stylesheet.css" rel="stylesheet" type="text/css" charset="utf-8"> <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet" type="text/css"> </head><body> <header class="header"> <h1 id="logo-type"><a href="index.html">CSS3 Animation Cheat Sheet</a></h1> <nav class="nav"> <ul> <li class="hide"><a href="index.html#how">How it works</a></li> <li><a href="scrolling.html">Examples</a></li> <li><a href="index.html#download">Download</a></li> <li class="hide"><a href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Ftwitter.com%2Fabout%2Fresources%2Fbuttons&text=Check%20out%20this%20awesome%20set%20of%20CSS3%20animations%20for%20your%20website&tw_p=tweetbutton&url=http%3A%2F%2Fwww.justinaguilar.com%2Fanimations%2F&via=JXTN" target="blank">Share</a></li> </ul> </nav> </header> <section id="animation"> <div class="animation-container"> <div class="animate tossing" id="object"></div> </div> <div class="cta-wrapper"> <a class="examples" href="scrolling.html">See more examples →</a> </div> </section> <section id="actions"> <div class="container"> <h2>Entrances</h2> <a class="button" id="slideUpBtn" href="#">Slide Up ↑</a> <a class="button" id="slideDownBtn" href="#">Slide Down ↓</a> <a class="button" id="slideLeftBtn" href="#">Slide Left ←</a> <a class="button" id="slideRightBtn" href="#">Slide Right →</a> <a class="button" id="slideExpandUpBtn" href="#">Slide Expand Up ↑</a> <a class="button" id="expandUpBtn" href="#">Expand Up ↑</a> <a class="button" id="fadeInBtn" href="#">Fade In</a> <a class="button" id="expandOpenBtn" href="#">Expand Open</a> <a class="button" id="bigEntranceBtn" href="#">Big Entrance</a> <a class="button" id="hatchBtn" href="#">Hatch</a> <h2>Misc</h2> <a class="button" id="bounceBtn" href="#">Bounce</a> <a class="button" id="pulseBtn" href="#">Pulse</a> <a class="button" id="floatBtn" href="#">Floating</a> <a class="button" id="tossingBtn" href="#">Tossing</a> <a class="button" id="pullUpBtn" href="#">Pull Up ↑</a> <a class="button" id="pullDownBtn" href="#">Pull Down ↓</a> <a class="button" id="stretchLeftBtn" href="#">Stretch Left ←</a> <a class="button" id="stretchRightBtn" href="#">Stretch Right →</a> </div> </section> <section id="how"> <div class="container"> <h2>How it works</h2> <p> 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. </p> <p> The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on <a href="https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp">all the latest browsers</a> (that's IE 10). Using CSS3 @keyframes, you don't have to worry about positioning the element to accomodate the animations - it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn't trigger. Below are instructions on how to get started. </p> <h4>Add the animation stylesheet to the <head> element of your webpage:</h4> <pre><code class="no-corners"><link rel="stylesheet" href="<span>css</span>/animations.css"></code></pre> <div class="additional-info"> <p>Replace <span>css</span> with the name of the directory where the animation stylesheet is.</p> </div> <h4>Add an animation class to the element you want animated:</h4> <pre><code class="no-corners"><div id="object" <span>class="slideUp"</span>></code></pre> <div class="additional-info"> <p>Replace <span>slideUp</span> with the desired animation class.</p> </div> <h4>For entrance animations, you need to make them invisible by adding the <span>visibility: hidden</span> property to the animated element:</h4> <pre><code class="no-corners">#object{ background-color: #fe5652; <span>visibility: hidden;</span> }</code></pre> <div class="additional-info"> <p><span>visibility: hidden;</span> is used to hide elements before the animation is activated.</p> </div> <p class="emphasis"> The values for these animations are relative to the element's size. That means bigger images have more exaggerated animations and smaller images have more subtle animations. While these animations are simple to implement, feel free to tweak values in the stylesheet to get the right effect. </p> <h2>Adding effects</h2> <p> By default, these animations will trigger when the page loads - even if the element is further down the page - but by using jQuery there are many ways you can activate the animations. <a href="scrolling.html">See how you can use these animations on your website</a>. </p> <h4>Add jQuery to the <head> element of your webpage:</h4> <pre><code><script src="https://code.jquery.com/jquery-1.10.1.min.js"></script></code></pre> <h4>Add this before the </body> tag to trigger the animation when the user scrolls to the element:</h4> <pre><code class="no-corners"><script> $(window).scroll(function() { $('<span>#animatedElement</span>').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+<span class="modify">400</span>) { $(this).addClass("<span>slideUp</span>"); } }); }); </script></code></pre> <div class="additional-info"> <p>Replace <span>#animatedElement</span> with the ID or class of the element you want animated.</p> <p>Replace <span>slideUp</span> with an animation class.</p> <p><span class="modify">400</span> represents the space between the element and the top of the screen. The animation activates when the element is <span class="modify">400px</span> from the top of the screen. Increase this number to make the animaton activate sooner.</p> </div> <h4>Add this before the </body> tag to trigger the animation when the user clicks on the element:</h4> <pre><code class="no-corners"><script> $('<span>#animatedElement</span>').click(function() { $(this).addClass("<span>slideUp</span>"); }); </script></code></pre> <div class="additional-info"> <p>Replace <span>#animatedElement</span> with the ID or class of the element you want animated.</p> <p>Replace <span>slideUp</span> with an animation class.</p> </div> </div> </section> <section id="download"> <div class="container"> <a class="download" href="./css/animations.css" target="blank">Download</a> <p>All you need is the .CSS file!</p> </div> </section> <section id="contact"> <div class="container"> <a class="cta" href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Ftwitter.com%2Fabout%2Fresources%2Fbuttons&text=Check%20out%20this%20awesome%20set%20of%20CSS3%20animations%20for%20your%20website&tw_p=tweetbutton&url=http%3A%2F%2Fwww.justinaguilar.com%2Fanimations%2F&via=JXTN" target="blank"> <img class="pulse" alt="Twitter logo" src="./images/twitter-bird-light-bgs.png"> </a> <h2>If you found this project useful, spread the word on Twitter!</h2> <p class="contact">Direct your questions, comments, concerns, love letters, and cat videos to <a href="https://www.twitter.com/jxtn">@JXTN</a> or to my <a href="mailto:justin@justinaguilar.com">email</a>.</p> </div> </section> <script> $(window).scroll(function() { $('#examples-cta').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+400) { $(this).addClass("slideUp"); } }); }); </script> <script> /* ENTRANCES */ $('#slideUpBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("slideUp"); }); }); $('#slideDownBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("slideDown"); }); }); $('#slideLeftBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("slideLeft"); }); }); $('#slideRightBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("slideRight"); }); }); $('#slideExpandUpBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("slideExpandUp"); }); }); $('#expandUpBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("expandUp"); }); }); $('#fadeInBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("fadeIn"); }); }); $('#expandOpenBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("expandOpen"); }); }); $('#bigEntranceBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("bigEntrance"); }); }); $('#hatchBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("hatch"); }); }); /* MISC */ $('#bounceBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("bounce"); }); }); $('#pulseBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("pulse"); }); }); $('#floatBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("floating"); }); }); $('#tossingBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("tossing"); }); }); $('#pullUpBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("pullUp"); }); }); $('#pullDownBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("pullDown"); }); }); $('#stretchLeftBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("stretchLeft"); }); }); $('#stretchRightBtn').click(function() { $(this).each(function(){ $('#object').removeClass(); $('#object').addClass("stretchRight"); }); }); </script> </body></html>

Modified http://code.jquery.com/jquery-1.10.1.min.js to a secure url

https://code.jquery.com/jquery-1.10.1.min.js