Websites don’t need to look like newspapers. They don’t need to just be static lines of text with an image or two anymore. The internet is like a super TV showing a choose-your-own-adventure story that can look like and do whatever it wants. There was a time when moving images took up too much computing power to be worth including on a web page, but all that has changed. It’s now easier than ever to incorporate moving parts and animations to your website and create a more fun experience for your users.
Good animation will make the user’s experience better. This can be in the form of an emotional connection – such as a fun, positive experience – or by making a site easier to use.
-Carrie Cousins, DesignShack.com
There are lots of tutorials out there for animating with CSS5. A fun and easy way to play with it while learning is to experiment with a CSS3 Animation Generator. Sites like this allow you drop and drag shapes and text on a timeline, and then spit out code you can drop into your editor. You can then chop it up and dissect it and see how it all works. Having a built in timeline makes CSS animations pretty powerful, and can jump start a narrative. Watching a few tutorials and then just playing with the code in your editor is the best way to jump into it.
Animation is great, it can be everything from a narrative to a button changing color when clicked. Clients love having that little something that makes their site different, and a little bit fun. Animation is just making use of tools that we already have and are most likely being wasted. A great way yo get started is to pick a link on your homepage that you want users to click. Make that button move or change color or size just a tiny bit. Watch your analytics for a couple days and see if that link gets clicked. Humans are hard wired to respond to movement and there is no reason to not use it that to your advantage.
Here’s a good CSS animation tutorial to get you started-