255 CSS Animations sorted by best sellers.

 

CSS3 Shadow Pack

  • Software Version: CSS 3
File Types Included:
  • JavaScript JS
  • HTML
  • CSS
$5
(143)
981 Sales
Last updated: 19 Aug 12

CSS3 Image Hover Effects

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$3
(111)
914 Sales
Last updated: 27 Apr 14

CSS3 Ribbon Pack

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$5
(79)
813 Sales
Last updated: 16 Jun 13

HoverMe - Collection of CSS3 Hover Effects

  • Software Version: CSS 2 - 3
File Types Included:
  • HTML
  • CSS
$2
(121)
784 Sales
Last updated: 27 Apr 14

CSS3 Hover Effects

  • Software Version: CSS 2 - 3
File Types Included:
  • JavaScript JS
  • HTML
  • CSS
  • LESS
$6
(15)
514 Sales
Last updated: 11 Feb 15

CSS3 Image Lightbox

  • Software Version: CSS 2 - 3
File Types Included:
  • HTML
  • CSS
$2
(29)
341 Sales
Last updated: 27 Apr 14

IHC - Portfolio CSS3 Image Hover Caption

  • Software Version: CSS 2 - 3, Other
File Types Included:
  • HTML
  • CSS
$5
(34)
281 Sales
Last updated: 14 Jan 12

CSS3 Image Hover Effects Vol.2

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$3
(36)
278 Sales
Last updated: 27 Apr 14

CSS3 Image - Text Hover Effects

  • Software Version: CSS 3
File Types Included:
  • JavaScript JS
  • HTML
  • CSS
$2
(11)
263 Sales
Last updated: 10 Jan 14

Pristine Slider: Pure CSS3 interactive slider.

  • Software Version: CSS 2 - 3
File Types Included:
  • JavaScript JS
  • HTML
  • CSS
  • PHP
$7
(16)
244 Sales
Last updated: 28 Mar 12

Friendly Flip 'n' Fade - CSS3 flip, fade and glow!

  • Software Version: CSS 2 - 3
File Types Included:
  • HTML
  • CSS
$3
(33)
206 Sales
Last updated: 18 Feb 11

Full CSS3 Tooltip

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$3
(29)
195 Sales
Last updated: 10 Mar 12

Aero - Image Hover Effects

  • Software Version: CSS 3
File Types Included:
  • JavaScript JS
  • JavaScript JSON
  • HTML
  • CSS
  • Sass
  • Layered PNG
$13
(8)
170 Sales
Last updated: 12 May 21

Advanced CSS3 Hover Effects 3

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$4
(18)
142 Sales
Last updated: 16 Jan 13

Bootstrap Icons Animator

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$4
(12)
139 Sales
Last updated: 10 May 13

Haze - Responsive Images CSS3 Shadow

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$4
(13)
134 Sales
Last updated: 13 Sep 12

Killer CSS3 Image Hover Effects

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$5
(22)
118 Sales
Last updated: 14 Jan 12

CSS3 Image Lightbox

  • Software Version: CSS 2 - 3
File Types Included:
  • JavaScript JS
  • HTML
  • CSS
  • PHP
  • Layered PNG
$9
(9)
117 Sales
Last updated: 15 Aug 11

Animatia - CSS Image Hover Effects

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$10
(3)
114 Sales
Last updated: 12 Aug 15

CSS3 Banner Rotator

  • Software Version: CSS 2 - 3
File Types Included:
  • HTML
  • CSS
$4
(10)
109 Sales
Last updated: 25 Feb 13

Xoverlay-v1.0

  • Software Version: CSS 3
File Types Included:
  • CSS
$6
(3)
105 Sales
Last updated: 18 Aug 14

Social Mosaic Wall [ 2020 Edition ]

File Types Included:
  • HTML
  • CSS
  • Layered PSD
$7 $3
(6)
102 Sales
Last updated: 15 Jun 20

tFigure - Image Captions

  • Software Version: CSS 2 - 3
File Types Included:
  • HTML
  • CSS
$3
(8)
101 Sales
Last updated: 26 Jul 14

Pure CSS3 Image Accordion

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$4
(10)
99 Sales
Last updated: 27 Jan 13

SolidEffects | CSS3 Image Hover Effects

  • Software Version: CSS 3
File Types Included:
  • JavaScript JS
  • HTML
  • CSS
  • LESS
$6
(6)
96 Sales
Last updated: 25 Oct 16

Original Hover Effects

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$4
(4)
94 Sales
Last updated: 22 Jun 14

CSS3 Hover Pack

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$5
(7)
87 Sales
Last updated: 03 May 12

Advance Hover Effects

  • Software Version: CSS 3
File Types Included:
  • HTML
  • CSS
$4
(7)
79 Sales
Last updated: 16 Nov 12

Animated Loaders KIT

  • Software Version: CSS 2 - 3
File Types Included:
  • HTML
  • CSS
$6
(3)
78 Sales
Last updated: 15 Jul 14

Ayan. CSS3 Link Hover Effects

  • Software Version: CSS 2 - 3
File Types Included:
  • HTML
  • CSS
$5
77 Sales
Last updated: 01 Mar 16

CSS animations and how to use them

CSS animations are cropping up everywhere. It seems as though every website you visit has some cool effect happening when you’re scrolling down the page or hovering your mouse over the logo. No matter what kind of business or website it is, there’s always an opportunity to add a CSS animation in for some added wow-factor. And you know what—adding these little bits of style to your website doesn’t have to be difficult! In fact, you can even get them already written for you.

However, there is an art to picking the right CSS animation for your project. If you’re building a website for a hospital you’ll definitely have different requirements from a children's after-school club. Use code that’s relevant to your project: it’s easy to add 20 different animations to the site and just change the class of an element so that a specific animation targets it. But adding irrelevant code can seriously slow down your website and impact other areas too. Plus, we don’t really need to tell you that a spinning logo can look great if you’re creating a website for a children’s entertainer… But not so great if it’s for a law firm.

But don’t worry—we can help. Browse through categories and subcategories and get some inspiration—there’s plenty to see! And want to know something really great about CSS animations? They’re cross-browser friendly. CSS works on all web browsers, big or small. There is no risk of the code not appearing properly—provided you use a couple of tricks to make sure Internet Explorer plays ball ;)

So why should you use CSS animations? Quite simply, they add a little more to your website than just changing the color of the font or the text size. Having an element of the interface fade in to suggest the beginning of a process, or adding color to an image when the mouse is hovered over, can have a huge impact on a user’s experience of the website. All this also contributes to communicating your brand through style and look.

Tuts+ contributor Andrew Blackman has highlighted a number of popular courses on CSS animation. This is a great resource if you want to learn how to do it yourself and have a little time to spare to go through this awesome list. However, if you’re just looking for a quick fix or something that’s been quality checked, then you’re in the right place—we have a huge selection of CSS animation snippets ready to use!

Dive deeper into CSS.

You shouldn’t just stop there. If you’re keen on learning a little more about CSS and building your own website, then why not read one of the CSS tutorials available and start showing off your skills? You could even submit something to CodeCanyon and start earning your own money from a CSS snippet that people need!