Here’s a quick demo of how to use CSS animation to hide a page element on click. This technique is only useful in a webkit-based browser, such as Safari of Chrome – I’d highly suggest checking it out in one of these browsers.

I’m Off!

Using one of the aforementioned browsers, click on the box above. It should fly off the left side of the page, rotating and getting smaller as it moves off the page. This has the effect of appearing to be removed from the page. In reality, the section is still there, it’s just been moved to the left. This is little more than a tech demo at this point, since CSS animations aren’t supported in the more popular browsers, including Firefox and Internet Explorer – using JavaScript for such a technique is still highly recommended for now.