Top CSS Animation Web Sites and Tools
Web Sites
- W3Schools – (http://www.w3schools.com/css/css3_intro.asp ) : Basic CSS theory and “Try Me” examples.
- Animate|CSS-Tricks – (http://css-tricks.com/almanac/properties/a/animation/ ):
- CSS3 Animation Cheat Sheet - Justin Aguilar – (http://www.justinaguilar.com/animations/index.html#ho/ ): 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 ...
- The Guide To CSS Animation: Principles and Examples (http://www.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/ ): With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try.
- ***** CSS Animation (http://css3.bradshawenterprises.com/animations/ ): How to use CSS3 Animations with keyframes that work in Webkit and Firefox 5+.
- Surfin' Safari - Blog Archive » CSS Animation – WebKit (https://www.webkit.org/blog/138/css-animation/):
- Animation: All the CSS3 properties explained (http://www.css3files.com/animation/#ani2): The name of the animation as specified at the keyframes. Many of the available CSS properties can be animated. If set to none no animation is executed.
- Web Animations – Polymer (http://www.polymer-project.org/platform/web-animations.html): CSS Transitions / CSS Animations are not very expressive - animations can't be composed, or sequenced, or even reliably run in parallel; and animations can't ...
- The guide to CSS animations for the web (http://ihatetomatoes.net/the-guide-to-css-animations-for-the-web/): How do you add css animations to your website? Should you use CSS or JavaScript animations? Which animation library is best for you?
- Making things move with CSS3 animations (http://docs.webplatform.org/wiki/tutorials/css_animations): By Mike Sierra. Summary. CSS animations allow you to build complex animated sequences. Like transitions, they manipulate the CSS properties that control ...
- CSS: Animation vs. Transition(http://stackoverflow.com/questions/20586143/css-animation-vs-transition )Dec 14, 2013 - sf-page { -webkit-transition: -webkit-transform .2s ease-out; } ... It looks like you've got a handle on how to do them, just not when to do them.): Dec 14, 2013 - sf-page { -webkit-transition: -webkit-transform .2s ease-out; } ... It looks like you've got a handle on how to do them, just not when to do them.
- Hiding elements and CSS animations | Rhumaric, pixel ... (http://rhumaric.com/2013/12/hiding-elements-and-css-animations/ ):Dec 18, 2013 - Following the last article about CSS animations using Javascript, let's see how we can apply this to something closer to a real life situation than ...
[top of page]
- ****** Animate.css – (http://daneden.github.io/animate.css/): Just-add-water CSS animations. bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, bounceIn, bounceInDown, bounceInLeft, bounceInRight ...
- ****** CSS3Generator (http://www.css3generator.com/ );
- ****** CSS3 Keyframes Animation Generator– (http://cssanimate.com/ ): Online tool for creating native CSS3 Keyframes Animation. You can easy and fast generate consistent CSS3 animation using simple UI without any coding.
- **** CSS Animation - CSS 3.0 Maker– (http://www.css3maker.com/css3-animation.html ): The CSS Animation Generates '-webkit-animation ' property in WebKit and standard CSS3 syntax.
- *** Can I use CSS3 Animation – (http://caniuse.com/css-animation): Compatibility table for support of CSS3 Animation in desktop and mobile browsers.
- CSS Animation Generation (http://coveloping.com/tools/css-animation-generator): Apr 21, 2014 - The CSS animation generator tool allows you to create over 50 different preset animations. Bounce; Bounce In; Bounce In Up; Bounce In Down ...
- Animatable (http://leaverou.github.io/animatable/ ):
- Tools and Resources for web professional ( http://www.westciv.com/
[top of page]
- CodePen (http://www.codepen.io) CodePen - Front End Developer Playground & Code Editor in the Browser
- JSFiddle (http://www.jsfiddle.net ) Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
- Github (http://www.ghthub.com/ ) Powerful collaboration, code review, and code management for open source and private projects.
[top of page]
- Express Prefixr (http://expressprefixr.herokuapp.com/ ): Easily add vendor-properties to CSS.
- AutoPrefixer (https//github.com/ai/autoprefixer): designed to integrate into workflow rather than being a visual UI tool. Autoprefixer add prefixes where appropriate by suing rules provided by Can I Use website. Its slogan is : “Write you CSS rules without vendor prefixes (in fact, forget about them entirely)”.
- -Prefix-Free Library (leaverou.github.io/prefixfree/ ) -- Is a JavaScript library that looks at your style sheets in runtime and adds the vendor prefixes when needed.
- Autoprefixer (http://css-tricks.com/autoprefixer/ ): A postprocessor for dealing with Vendor Prefixes in the Best Possible Way.
[top of page]
[top of page]
Examples
- CSS Animation (http://ryanflorence.com/cssanimation/): CSS Transforms and Transitions with a dead simple JavaScript API, including MooTools and jQuery wrappers! - By Ryan Florence
- Andrew Hoyer (http://andrew-hoyer.com/ ): Bridging old school moving pictures with new school CSS animation. CSS3 ... A fully animated figure (myself) using nothing by CSS animations. CSS3 ...
- CSS Spider-Man animation, by Anthony Calzadilla
- CSS Tricks (animated typography person), by Mircea Piturca
- 3 stunning CSS animation effects that will captivate your users (http://www.webdesignerdepot.com/2014/04/3-stunning-css-animation-effects-that-will-captivate-your-users/): Apr 24, 2014 - Beautiful visual design isn't enough any more, modern design needs great interaction to really stand out. Animations in your designs can .
- 47 Amazing CSS3 Animation Demos - Web Designer Wall – (http://webdesignerwall.com/trends/47-amazing-css3-animation-demos/ ): Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as JavaScript alternatives. Most of them are simply to look cool. In order to view these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!
- 20 stunning examples of CSS3 animation - Creative Bloq – (www.creativebloq.com/css3/animation-with-css3-712437):The inspirational experiments in CSS3 animation listed here show just what CSS is now capable of - and while some utilize the odd bit of ...
- 50 Awesome CSS3 Animations - 1stWebDesigner – (http://www.1stwebdesigner.com/css/50-awesome-css3-animations/ ): CSS3 has brought some amazing new features. And the most fun is playing with the CSS animation. Here is a compilation of 50 CSS3 animation that allows you ..
- 38 Inspiring CSS3 Animation Demos – (http://www.hongkiat.com/blog/css3-animation-transition-demos/): In this showcase we are gonna show nothing but just 38 inspiring CSS3-based animation demos that purely discover the true potential of the CSS3.
- How I rebuilt "Flying Toasters" using only CSS animations ... (http://www.bryanbraun.com/2014/03/15/how-i-rebuilt-flying-toasters-using-only-css-animations ):
- ***** CSS A/Z (http://cssaz.tumblr.com/ ): An entirely HTML/CSS animated sketch for each letter made (hopefully) every day for 26 days. Follow the link in each post to view the animation's code
- Animation with CSS Transitions Made Easy « Aza on Design (http://www.azarask.in/blog/post/animation-css-transitions-jquery-easy/ ): There are currently two proposed additions to CSS to make animating easier and with better performance: CSS Transitions and CSS Animations. Both are ...
- CSS Animations with Franklin (http://html5hub.com/css-animations-with-franklin/#i.tkmcyuy2ecyms3): Franklin threw me into the world of CSS animations, and I would like to walk with you through the details. CSS Drawing. Franklin was built using only HTML and ...
- 30 Best Creative CSS3 Animation Examples – Designscrazed (http://designscrazed.com/css3-animation-examples/): These are pure CSS3 animations which starts with auto timers, click events or ones which load with your website.
- CSS Animated Hamburger Icon Problem (http://www.elijahmanor.com/css-animated-hamburger-icon/): CSS Animated Hamburger Icon. Problem. I've been working more on mobile web these days and thought it would be fun to animate the prolific ...
- Examples from the CSS Animations Pocket Guide book (http://codepen.io/valhead/pen/Austg): All these pens are companions to the CSS Animations Pocket Guide on Five Simple Steps http://www.fivesimplesteps.com/products/css-animations/ ...
- Playing with CSS3 Animations – Designmodo (http://docs.webplatform.org/wiki/tutorials/css_animations): I would like to share with you a personal experience I had while trying to build advanced visual animations with CSS keyframes .
- Loading Effects for Grid Items (http://tympanus.net/Development/GridLoadingEffects/index4.html):
- All About CSS Animations | kirupa.com (http://www.kirupa.com/html5/all_about_css_animations.htm): Learn all about working with CSS animations by meeting the animation property, @keyframes rule, and more!
- CSSAnimation Homepage & Documentation ():
- 60+ Premium CSS Animation | CodeCanyon (http://codecanyon.net/category/css/animations-and-effects): Add animation features with custom CSS animations. Every code snippet on CodeCanyon is reviewed for quality.
- Magic Animations CSS3 – Minimamente (http://minimamente.com/example/magic_animations/): DOWNLOAD from GitHub. Magic Effects. magic twisterInDown twisterInUp swap. Bling. puffIn puffOut vanishIn vanishOut. Static Effects. openDownLeft ...
[top of page]
CSS and JavaScript Class Libraries
- Animate.css – (www.daneden.github.io/animate.css/ ): Just-add-water CSS animations. bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, bounceIn, bounceInDown, bounceInLeft, bounceInRight ...
- Anima.js – (http://lvivski.com/anima/#toc_12 ): CSS animations have some limits; the main is that you can't really have full control over them. And it's near impossible to stop transitions without dirty hacks.
- Animo.js (http://labs.bigroomstudios.com/libraries/animo-js): CSS animations are phenomenal and offer numerous advantages over JavaScript powered animations. First, they're hardware accelerated, which sometimes ...
- WOW.js (http://mynameismatthieu.com/WOW/index.html ): Reveal Animations When You Scroll. Very Animate.css Friend :-) Easily customize animation settings: style, delay, length, offset, iterations... such easy. very JS.
- Creating CSS Animations Using Move.js – SitePOint (http://www.sitepoint.com/creating-css-animations-using-move-js/ ): Creating CSS Animations Using Move.js
[top of page]
[top of page]
Books and Videos
[top of page]
References
- CSS Animations Level 1 - W3C– (http://dev.w3.org/csswg/css-animations-1/ and http://www.w3.org/TR/css3-animations/ ):
- CSS Animations - Wikipedia, the free encyclopedia (http://en.wikipedia.org/wiki/CSS_Animations ): CSS Animations is a proposed module for Cascading Style Sheets that allows the animation of HTML document elements using CSS.
- Making a Move With CSS3 Animations – (http://dev.opera.com/articles/css3-animations/ ): The CSS animations spec, proposed and edited by Apple, is currently in Working Draft status and is labelled as "Outdated" on the CSS working group current work page, so I think we can expect to see some minor changes before it is completed, but the basic principle should remain the same.
- How to Capture CSS3 Animation Events in JavaScript (http://www.sitepoint.com/css3-animation-javascript-event-handlers/ )
- CSS vs jQuery Animation (http://dev.opera.com/articles/css3-vs-jquery-animations/ )
- CSS Transitions and 2D Transforms (http://dev.opera.com/articles/css3-transitions-and-2d-transforms/ )
- Training classes at Lynda.com (http://www.lynda.com): CSS with LESS and Sass, CSS: Transitions and Transforms, jQuery Essentials, JavaScript Essential Training (2011).
- Learning CSS3: Useful References and Guidelines, on Smashing Magazine
- Mastering CSS Principles: A Comprehensive Guide, on Smashing Magazine
[top of page]