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.

Delay JavaScript input events for multiple interactions

If you have a feature that filters data, or even hits a live API, after the user inputs some text you may want to throttle the event, ideally adding a delay so it only triggers the event once. I guess in layman’s terms we are making the event wait for the user to finish typing.

It can be very easily fixed by assigning a setTimeout method to a variable and then clearing the setTimeout if the event fires again, that way it will continually overwrite itself until the user stops. Here’s a quick fiddle to demonstrate the technique.

Textarea maxlength and jQuery

It’s just another one of those html4 oversights – textareas do not support the maxlength attribute! It’s frustrating as it’s often requested and can cause problems when people paste in huge amounts of data and submit it to your server but it’s easily fixed with JavaScript.

Using jQuery you can easily delegate events to each textarea and catch each user input, shortening it once it’s past the maximum value.

Here’s a quick fiddle to demonstrate:

Thankfully html5 now fully supports the maxlength attribute and this issue will soon be a thing of the past!