Home » CSS » CSS Animation Resources

CSS Animation Resources


This week I discovered CSS Animations.  Well, I shouldn’t say I discovered it so much as I finally spent some time figuring out what it is and why I would care about it.  This could make so much of what we normally do in JavaScript entirely unnecessary.  So, more for my own benefit than anything else, I thought today I would just create a list of resources that are available.

But first, why would you want to use CSS for animation when JavaScript could do it just as well?

CSS and HTML live in the same world

As I mentioned a few weeks ago when I discussed JavaScript performance, anytime you manipulate the DOM from JavaScript, you have to cross the HTML/JavaScript boundary.  And to do it right, you have to make sure you work in sync with the key frames that the DOM is living in.  If you don’t, at best you will be animating more than you need to if you use JavaScript to do the animation.  On a phone, this can eat up precious battery life.  For me, this is the biggest reason.

Declarative Code Is Easier To Read

I realize that some may disagree with this.  But my feeling is, if I can express in one line what would  take a loop in JavaScript to do, I’ll take the one line of code.  This one of the things that makes Angular attractive.  I can create my own HTML tags.  Why not get the same benefit from my CSS?

Reasons Why You Might Not

There are a few reasons why you might not use CSS Animations.  First, it is relatively new.  It may not do everything you want it to do.  So, you may have to resort to using JavaScript for at least some of the things you want to do.

Second, it may not support all of the browsers you need to support.


Here are a brief list of resources that I found

CSS Generators

CSS Animated Accordion


Slide Show

When I first suggested “CSS Animations” to a designer friend of mine, he reacted as though I was suggesting putting a flash animation on a web site.  Obviously, we wouldn’t want to do that. But we use animation is some pretty creative ways.  So the next time you reach for JavaScript to add some sort of animation to your web application, do a search for a CSS Animation instead.


Other post in CSS

Related Post

  • Responsive Web Design ConversionResponsive Web Design Conversion Several weeks ago, I started the process of converting this blog to a responsive design.  At this point it is mostly done.  But it is done enough that I can tell you the process […]
  • WebForms vs MVC–The War Is OverWebForms vs MVC–The War Is Over loading... I just finished listening to a DotNetRocks podcast today with Paul Sheriff which largely talked about creating mobile web sites using ASP.NET WebForms. During the show they […]
  • Why CSS ID selectors are Evil in ASP.NET Web FormsWhy CSS ID selectors are Evil in ASP.NET Web Forms Anyone familiar with CSS knows that class selectors are generally reserved for controlling how an element looks (font, color, size, etc) and id selectors are generally reserved for where […]
  • iTextSharp – HTML to PDF – Finishing UpiTextSharp – HTML to PDF – Finishing Up In the last post I mentioned there were a few topics we need to close up today.  The two topics we’ve left undone are popping the attribute information off the stack when we hit a […]
  • jQuery Expand/Collapse Using Head TagsjQuery Expand/Collapse Using Head Tags I’ve spent a good chunk of the last two days working on an interesting project for one of my clients that I think the rest of the jQuery community could benefit from. The task started […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS.Does your team need additional help in any of the above? Contact Dave today.