I’m sure you’ve probably heard of HTML, you can see the HTML of our website if you press Ctrl + U (Cmd + U on a Mac) while on this page, it’s the building blocks of every website… the skeleton if you will. Well CSS is the skin, hair and clothes of the website. Cascading Style Sheets control how the website looks and even the overall positioning of where items sit.
It can also be used to animate elements on your website and is in fact the most common type of animation used on the internet. If you hover over a button and it changes colour, this will be the result of the :hover class in CSS that applies different styles to that element when it’s hovered over.
In recent years it can go even further, with complex animations including multi-step and delayed animations that are actioned when the user clicks. It utilises a property called keyframes and allows the animation of menus, like the one seen on one of our recent projects urchinspirits.com.
CSS hover animations can also produce effects like the one you can see below. None of the elements in this animation are pre-made images, the structure is built using HTML and the styling and animation is built using CSS. It’d certainly make us click on it.