Popular:

CSS Animations Tutorials

  • By
    SVG Animations Using CSS and Snap.svg

    Today I wanted to share with you the ease of animation in SVG with the tools we have available to us today. SVG is still one of those subjects that can scare away a lot of developers, but I'm here to show you hopefully just...

  • By
    Scoping CSS Animations to Media Queries

    When coding my blog's redesigns, I think and design the site in device width stages, and in the following order: Desktop:  all general styles, none wrapped in a media query Tablet:  media query, roughly popular tablet widths Phone:  media query, any width below tablet width Print:  media query, mostly a bunch display: none Since I focus on...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    The Simple Intro to SVG Animation

    This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element...

  • By
    Parallax Sound Waves Animating on Scroll

    Scrolling animations are fun. They are fun to create and fun to use. If you are tired of bootstrapping you might find playing with scrolling animations as a nice juicy refreshment in your dry front-end development career. Let's have a look how to create animating...

  • By
    Display Images as Grayscale with CSS Filters

    CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    How Nesting 3D Transformed Elements Works

    CSS animations are incredibly popular right now, and I don't just mean animating a simple color or dimension property, I mean 3D transformations as well; CSS flips and rotating cubes being prime examples. We can find simple CSS snippets and examples for transforms, but...

  • By
    Detecting CSS Animation Completion with JavaScript

    One fact of web development life in 2014 that's been difficult for me to admit is that the traditional JavaScript toolkit is mostly dead.  For years we relied on them for almost everything but now that JavaScript and CSS has caught up with what we need...

  • By
    CSS animation-fill-mode

    We're always super excited to get into CSS animations because, quite frankly, they're incredibly awesome.  One overlooked animation property, however, is the animation-fill-mode property.  This CSS property sets the state of the end animation when the animation is not running.  Here's a quick example: In the case...