140 CSS Animations.

Chevron-Down

Filter & Refine

140 results
Clear all
$
-
$
140
52
52
51
46
140
29
1

140 items in

  1. All Categories
  2. /
  3. CSS
  4. /
  5. Animations And Effects
  • Noodels - CSS3 Image Hover Effects
    Tags: css3, framework, free, hover, html5, image, perfect, pixel, responsive, template, transitionsSee all tags

    Noodels - CSS3 Image Hover Effects

    Css / Animations And Effects
    $9
    Last updated: 8 Oct 18
    • Responsive Template
    • Free icons used
    • Pixel Perfect
    Tags: css3, framework, free, hover, html5, image, perfect, pixel, responsive, template, transitions
    Show more
    PreviewCart
    CollectionFavorite
  • Codex Team Box
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hoverSee all tags

    Codex Team Box

    Css / Animations And Effects
    $4
    3 SalesLast updated: 14 Oct 18
    • CSS3 Hover Effects
    • Pure CSS Animations
    • Responsive Design
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hover
    Show more
    PreviewCart
    CollectionFavorite
  • Codex Hover Animation
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hoverSee all tags

    Codex Hover Animation

    Css / Animations And Effects
    $6
    3 SalesLast updated: 14 Oct 18
    • image Hover Animation [ 20 Style]
    • Service Box Hover Animation [ 20 Style]
    • Team Hover Animation [ 20 Style]
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hover
    Show more
    PreviewCart
    CollectionFavorite
  • TamaHovers - Responsive CSS3 Image Hover Effects
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hoverSee all tags
    $5
    6 SalesLast updated: 21 Aug 18
    • CSS3 Image Hover Effects
    • Responsive Design
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hover
    Show more
    PreviewCart
    CollectionFavorite
  • Motox - CSS3 Image Hover Effects
    Tags: colors, css, css3, effect, framework, hover, html, image, new, transitionsSee all tags

    Motox - CSS3 Image Hover Effects

    Css / Animations And Effects
    $9
    1 SalesLast updated: 21 Aug 18
    • Responsive Template
    • Free icons used
    • Framework Image hover effects
    Tags: colors, css, css3, effect, framework, hover, html, image, new, transitions
    Show more
    PreviewCart
    CollectionFavorite
  • Dex Pro - Preloader Kit
    Tags: animated, complex preloader, css, css preloader, css3 preloader, html, html5 preloader, light preloader, material design, page preloader, preloader collection, premium preloader, responsive preloader, smooth preloader, website preloaderSee all tags

    Dex Pro - Preloader Kit

    Css / Animations And Effects
    $4
    4 SalesLast updated: 11 Aug 18
    • 50+ Preloader
    • Pure CSS Animations
    • Included Example JS
    Tags: animated, complex preloader, css, css preloader, css3 preloader, html, html5 preloader, light preloader, material design, page preloader, preloader collection, premium preloader, responsive preloader, smooth preloader, website preloader
    Show more
    PreviewCart
    CollectionFavorite
  • Hoverta - CSS3 Image Hover Effects
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hover, overlay, slide, transitionsSee all tags

    Hoverta - CSS3 Image Hover Effects

    Css / Animations And Effects
    $4
    4 SalesLast updated: 22 Jul 18
    • CSS3 Image Hover Effects
    • Responsive Design
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hover, overlay, slide, transitions
    Show more
    PreviewCart
    CollectionFavorite
  • Flowerx - CSS3 Image Hover Effects
    Tags: css3, design, effects, fonts, google, hover, html5, original, transitionsSee all tags

    Flowerx - CSS3 Image Hover Effects

    Css / Animations And Effects
    $6
    15 SalesLast updated: 28 Jun 18
    • Framework Image hover effects
    • CSS3 transitions
    • Documentation file included
    Tags: css3, design, effects, fonts, google, hover, html5, original, transitions
    Show more
    PreviewCart
    CollectionFavorite
  • Hoverio - CSS3 Image Hover Effects
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hover, overlay, slide, transitionsSee all tags

    Hoverio - CSS3 Image Hover Effects

    Css / Animations And Effects
    $5
    6 SalesLast updated: 6 Jul 18
    • CSS3 Image Hover Effects
    • Responsive Design
    • Modern and unique design
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hover, overlay, slide, transitions
    Show more
    PreviewCart
    CollectionFavorite
  • meteorsa - CSS3 Image Hover Effects
    Tags: animation, clean, css3, effects, hover, image, menu, navigation, responsiveSee all tags

    meteorsa - CSS3 Image Hover Effects

    Css / Animations And Effects
    $6
    2 SalesLast updated: 26 Jun 18
    • Pure CSS3 HTML5 Original Design
    • CSS3 transitions Font Awesome Icons included
    • Documentation file included
    Tags: animation, clean, css3, effects, hover, image, menu, navigation, responsive
    Show more
    PreviewCart
    CollectionFavorite
  • bequeen - CSS3 Image Hover Effects
    Tags: css3, design, effects, fonts, google, hover, image, original, pureSee all tags

    bequeen - CSS3 Image Hover Effects

    Css / Animations And Effects
    $6
    8 SalesLast updated: 4 Jun 18
    • Framework Image hover effects
    • CSS3 transitions
    • Documentation file included
    Tags: css3, design, effects, fonts, google, hover, image, original, pure
    Show more
    PreviewCart
    CollectionFavorite
  • Dex Preloader Kit - Pure CSS3 Animations
    Tags: animated, complex preloader, css, css preloader, css3 preloader, html, html5 preloader, light preloader, material design, page preloader, preloader collection, premium preloader, responsive preloader, smooth preloader, website preloaderSee all tags
    $2
    17 SalesLast updated: 17 Jun 18
    • Fully Customizable
    • Pure CSS3
    • Included Example JS
    Tags: animated, complex preloader, css, css preloader, css3 preloader, html, html5 preloader, light preloader, material design, page preloader, preloader collection, premium preloader, responsive preloader, smooth preloader, website preloader
    Show more
    PreviewCart
    CollectionFavorite
  • Image /Thumb Hover Effects Collection- Responsive Hover CSS Showcase
    Tags: CSS efects, CSS3 Hover Effect, animation, card hover effect, content hover, css thumbnail hover effect, hover effects, hover with caption, minimal hover, mouse hover, transitions effects, xgeniousSee all tags
    $6
    11 SalesLast updated: 18 May 18
    • 20 Image /Thumb Hover Effects Collection
    • Full Responsive Image Hover Effect
    • Beautiful thumbnail hover effect
    Tags: CSS efects, CSS3 Hover Effect, animation, card hover effect, content hover, css thumbnail hover effect, hover effects, hover with caption, minimal hover, mouse hover, transitions effects, xgenious
    Show more
    PreviewCart
    CollectionFavorite
  • Saman Hover - +100 link hover effects
    Tags: button hover, criative link, hover, hover effect, hover link, link effect, link hover, llink hover effect, menu effect, mouse hover, mouse over, saman hoverSee all tags

    Saman Hover - +100 link hover effects

    Css / Animations And Effects
    $7
    6 SalesLast updated: 20 Aug 18
    • A complete hover css library
    • Simple and understandable
    • Easy to use for all users
    Tags: button hover, criative link, hover, hover effect, hover link, link effect, link hover, llink hover effect, menu effect, mouse hover, mouse over, saman hover
    Show more
    PreviewCart
    CollectionFavorite
  • Emanlo - Awesome CSS3 Image Hover Effects
    Tags: animation, caption, css, css3, design, hover, image, portfolio, responsive, sliderSee all tags

    Emanlo - Awesome CSS3 Image Hover Effects

    Css / Animations And Effects
    $6
    5 SalesLast updated: 10 May 18
    • Pure CSS3 + HTML5 Google Fonts
    • Framework Image hover effects
    • Font Awesome Icons included
    Tags: animation, caption, css, css3, design, hover, image, portfolio, responsive, slider
    Show more
    PreviewCart
    CollectionFavorite
  • Eman - Awesome CSS3 Image Hover Effects
    Tags: css, css3, effects, fonts, google, hover, image, modern, responsive, templatesSee all tags

    Eman - Awesome CSS3 Image Hover Effects

    Css / Animations And Effects
    $6
    3 SalesLast updated: 3 May 18
    • Pure CSS3 HTML5
    • 22 Image hover effects
    • Responsive layout
    Tags: css, css3, effects, fonts, google, hover, image, modern, responsive, templates
    Show more
    PreviewCart
    CollectionFavorite
  • 36 - Awesome CSS3 Image Hover Effects
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hover, overlay, slide, transitionsSee all tags

    36 - Awesome CSS3 Image Hover Effects

    Css / Animations And Effects
    $3
    5 SalesLast updated: 30 Apr 18
    • CSS3 Image Hover Effects
    • Responsive Layout, Easy to Customize
    • Mejor Browser Supported
    Tags: animated, animation, clean, content hover, hover, hover effects, image, image animation, image hover, minimal hover, mouse hover, overlay, slide, transitions
    Show more
    Cart
    CollectionFavorite
  • Animative - CSS3 Image Hover Effects
    Tags: animated, animation, clean, content hover, css3, hover, hover effects, image, overlay, slide, transitionsSee all tags
    $5
    20 SalesLast updated: 29 Mar 18
    • Pure CSS3 and Easy to use
    • 30 Image hover effects
    • Unique design
    Tags: animated, animation, clean, content hover, css3, hover, hover effects, image, overlay, slide, transitions
    Show more
    PreviewCart
    CollectionFavorite
  • ImageLine - Universal Image Hover Effects
    Tags: animation, caption hover, effect, hover, hover design, hover effect, image animation, image hover, minimal hover, mouse hover, portfolio, responsive, sliderSee all tags
    $4
    14 SalesLast updated: 7 Mar 18
    Tags: animation, caption hover, effect, hover, hover design, hover effect, image animation, image hover, minimal hover, mouse hover, portfolio, responsive, slider
    Show more
    PreviewCart
    CollectionFavorite
  • THUMBS - Image Hover Effects
    Tags: animations, css, css3, effects, hover, hover effects, html, html5, image hover, responsiveSee all tags

    THUMBS - Image Hover Effects

    Css / Animations And Effects
    $5
    9 SalesLast updated: 4 Mar 18
    Tags: animations, css, css3, effects, hover, hover effects, html, html5, image hover, responsive
    Show more
    PreviewCart
    CollectionFavorite
  • Essential Image Hover Effects
    Tags: animation, blog, bootstrap, caption hover, effects, hover, hover design, hover effect, image animation, image hover, minimal hover, mouse hover, portfolio, responsive, sliderSee all tags

    Essential Image Hover Effects

    Css / Animations And Effects
    $6
    31 SalesLast updated: 23 Dec 17
    Tags: animation, blog, bootstrap, caption hover, effects, hover, hover design, hover effect, image animation, image hover, minimal hover, mouse hover, portfolio, responsive, slider
    Show more
    PreviewCart
    CollectionFavorite
  • ihover – CSS3 Circular Image Hover Effects
    Tags: Image hover effects, css3, css3 effects, hover, hover effects, image effects, modern effects, responsive, responsive effectsSee all tags
    $5
    12 SalesLast updated: 26 Nov 17
    Tags: Image hover effects, css3, css3 effects, hover, hover effects, image effects, modern effects, responsive, responsive effects
    Show more
    PreviewCart
    CollectionFavorite
  • CSS3 Progressbar Framework
    Tags: clean code, clean progressbar, corporate, css3, html5, modern progressbar, progress, progress bar, progressbar design, responsive, w3c validate, web designSee all tags

    CSS3 Progressbar Framework

    Css / Animations And Effects
    $8
    4 SalesLast updated: 26 Nov 17
    • Progress Bar Styles
    • New Progress Bar Design
    • Responsive Progress bar
    Tags: clean code, clean progressbar, corporate, css3, html5, modern progressbar, progress, progress bar, progressbar design, responsive, w3c validate, web design
    Show more
    PreviewCart
    CollectionFavorite

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!