Pausing CSS3 Animations

Did you know you can pause CSS3 animations?

It’s a simple style property but it could potentially be very useful as removing an animation and then adding it again currently restarts it. So, for example, you could animate a logo inside a button that pauses when you hover over it.
It’s only supported by Chrome, Firefox and Opera so you would still require the correct prefix. Interestingly both and don’t mention it yet.

button:hover .icon{
-webkit-animation-play-state:paused; /* Webkit Browsers */
-moz-animation-play-state:paused; /* Firefox*/

/*JavaScript to toggle the Animation Play State*/
if ( === "paused") { = "running";
} else { = "paused";


Here’s a quick demo which shows how to toggle to property with JavaScript:

Data URI pattern effect & jQuery Mobile UI

Data URI’s are a powerful way of adding content in-line and saving the need for a http request as each one slows down your page load. They have an even greater advantage of allowing you to forgot about creating sprites for small images or background tiles and simply include them in your CSS instead.

In this case I was asked to add a mottled effect to the standard jQuery Mobile theme. It instantly adds a softer feel to the UI and looks especially good on high resolution mobile phone screens.

It’s worth noting here that I deliberately target just the “background-image” attribute as that doesn’t affect the rest of the UI as that uses CSS gradients and box shadows.

Support for Data URI

Sadly only the newest browsers support it just yet but the majority of mobile phones do. Therefore it makes a great addition to your mobile build whether it be a web app or a phonegap style hybrid app.