The CSS3 Animation Cheat Sheet is a small stylesheet which developers can append to their standard CSS and support basic CSS3 keyframe animations.The animation effects can be applied to any element on the page, solely by adding the appropriate class
Written in CSS 3 alone, this effect is quite easy to use, just by attaching one or more classes to a HTML page element.CSShake works with any HTML tag, even with nested structures.This tool is recommended for using with hover effects, but it ca
SpinKit uses pure HTML and CSS 3 code to create and animate a spinner graphic.SpinKit mimics some of the spinners (preloaders) seen with most Flash apps, a UI element used generally to mask the process of loading large content on a page.The animation
Effeckt.css was inspired by Animate.css, but comes with better support and smoother actions. Effeckt.css animations can be applied to any element on the page that can be manipulated via CSS 3.Examples are included with the download package. Requireme
FitMyVideo uses responsive CSS code to resize videos to perfectly fit inside their container's width.FitMyVideo also works with the viewport directly as well.Tested with Vimeo and YouTube videos.A demo is included with the download package.
The Polygons stylesheet can be used in creating polygon shapes via CSS code only.All created polygon shapes are correctly hovered and clickable elements.Supported shapes:HexagonOctagonDodecagon Requirements:· CSS 3 enabled browser
This snippet shows how to add image patterns on top of solid colors via CSS.All while allowing content to show normally.A demo is included with the download package.
Designed as a concept, this script allows developers to bring in/out HTML elements into view via a 3D fold transition.All animations are done via the CSS 3 transform property. Requirements:· CSS 3 enabled browser Limitations:· Works only in
It gracefully degrades for IE8. Here are some key features of "Menu Effects":Effects:· Bounce· Radial· Winding· Shield· Pop· Helix· Wave· Fan· Fly· Papercut· Venitian· Jaws· Blind·
Creates embeddable and extremely CPU friendly animated rainbows via CSS 3 code.This effect can be used as a background for page elements, from horizontal lines to text backgrounds.A demo is included with the download package. Requirements:· CSS
Just attach them to elements that need some nifty hover effects and your done. Here are some key features of "3D rollovers":Supported effects:· Rollover· Fade· Flip· Flip Up· Flip Box· Flip Box Fade· Flip Box Fade U
Written entirely in CSS 3, allows smooth animations between a website's pages.Demos are included with the download package. Including slide in and fade transitions. Requirements:· CSS 3 enabled browser
The effects can be applied to elements at hover or in more complex tools like slideshows or image galleries. Classes and animations have the same name. Here are some key features of "Animate.css":Attention seekers:· flash· bounce· shak
To create this effect, the author uses multiple techniques like combining multiple repeating-radial-gradients and animating the background-size and/or position.The effects can be shown at page load or on hover or active states. A working demo is incl
Usually, overlay effects are seen with jQuery modal windows, when the entire page dims down to highlight the popup box. This script shows hot to recreate that effect using CSS3.The advantage of this method is faster page load times and less server re
It provides examples on how to use CSS3 transforms, transitions, multiple background images, perspectives, translations and much more.It includes examples of 3D cubes, carousels, showing objects in perspective and more. Requirements:· Jekyll to
A vertical sliced panels effect is used to transition between the billboard's panels. Requirements:· CSS3 enabled browser Limitations:· Only Safari and Google Chrome support the billboard transition effects.
Text Gradient is a simple css trick that allows you to improve your site's appearance by putting gradients on system font titles using nothing but css and a png image. The trick is very simple. Text Color in png should start with your background