The latest CSS3 properties have opened a multitude of new doors to web designers and developers. It's now possible to create animations and interactivity entirely in CSS markup, without going near Flash, Silverlight or After Effects.
If you want to take advantage of these modern CSS capabilities, one best solution is to use CSS effects libraries. Luckily this post features 10 best CSS effects libraries you can use to spruce up your design. Enjoy!
Magic CSS3 Animations
Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your web projects. Simple include the CSS style: magic.css or include the minified version: magic.min.css. There are special effects like bling, perspective, rotate, static, slide, tin, math, bomb etc.
Animate.css is a ready-to-use library collection of CSS3 animation effects. This library supplies you with over 60 different animation effects which work consistently on most all browsers with CSS3 support. Once animate.min.css is included into your <head> document, you just need to add the animated class plus the name of the needed animation. Example with the Flash animation, the element class would be: class="animated flash".
Liffect is a web-based generator that provides lots of different effects for list elements. It makes use of CSS animations and requires jQuery for applying the delay in effects. There are items fading, zooming, sliding, flipping, bouncing and, a fun one, Star Wars-inspired effect.
Effeckt.css brings most animations we need daily, like modal transition, button loading, list item adding effects. Those effects are based on CSS3 transitions and keyframe animations, targeted to make as smooth as 60fps on mobile and desktop web application.
Read the 9 goals of Effeckt.css and watch the project’s 22-second video on YouTube to get a glimpse of Effeckt.css’s might bring int the future.
Lea Verou is sharing a beautiful experiment and resource - Animatable - a collection of CSS animation effects. It features 39 different effects. Each transition is applied to a box where you can activate by hovering them (or run the transitions for all items).
Fancy Input is a jQuery plugin that makes typing & deleting in input / Textarea fields exciting with CSS3 effects. Default effects are CSS3 hardware accelerated, and it supports input (type text) and textarea form elements. All effects are highly customizable via CSS.
Hover.css is a collection of hover effects with the power of CSS3 that can be used to create animated mouse hover over effects on any Html elements like buttons, images, and more.
All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS and SASS flavours.
CSS3 Animations Plugin
CSS3 Animations plugin uses the great new features in CSS3 especially Animations. This plugin can animate your site with minimal effort. Just choose the animation effect what you like /you can choosey 35 different animations / and use it in your element in CSS. Animation may take place during a hover on an element of the mouse to display or hide elements but can run as from the beginning. It is up to you when the animation makes.
There are two different versions - Development (72kb in size) and a Minified (45kb in size) version.
*Please confirm the email sent to your inbox after clicking "Sign Up!".