CSS3 animations for touch events, hover states, and other user feedback.

I wanted to create some feedback animation to indicate a touch had been registered. JavaScript is notoriously slower than native apps on tablet devices — one workaround is to give the impression of responsiveness through feedback.

In this experiment, I’m creating such a feedback to these three dots. Hover (or touch) the circles to see a little “radio pulse.”

I needed to use JavaScript to trigger these events — that’s currently the only way to ensure an animation finishes. Lifting your finger in a CSS-only setup would premptively end the animation. I want a full display whether the finger is lifted or not.

Le Code: CSS

Le Code: JavaScript