CSS Transitions & Whimsy

In my constant effort to push my skills, I’ve been fooling around with CSS transitions and animations with the idea that some dull micro-interactions can become a tiny bit more enjoyable (or a tiny bit less excruciating, depending) with a little bit of motion and maybe some whimsy.

The button below is one result, experimenting with timing the transitions of an element’s properties differently. It’s nothing fancy — you get a normal hover effect when you roll your cursor over the button, then a “secret” message when you roll off.

Dumb, I’ll admit, but the potential for relieving some dullness is real.

If for some reason you want to see the source code, its available and editable on CodePen.