This is my last blog posting for this course, CR2170. I would like to write about animation using HTML5 canvas and CSS3 Keyframes.
What is HTML Canvas?
What are CSS3 Animations?
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. (W3School.com)
I created two animated banners for my Coffee Lounge website: the one uses HTML5 canvas animation (The Newfoundland Gardener), and the other uses CSS3 animation (Origami Competition). The Origami Competition banner is quite simple: the background and the text colors are changed by CSS Keyframes properties over a period of time. If I created the same banner with Flash animation, it would have taken much longer to set the time and the color changes the way I did in CSS animation.
Figures 1 and 2: The Origami Competition Banner and The Newfoundland Gardener Banner
Source: Naomi Kobayashi (2015)
HTML5 canvas and CSS Keyframes are quite different. HTML canvas is better used for more complex tasks, such as interactive animation or games, while CSS animation is more suited for providing simpler animated effects for websites. I believe HTML5 and CSS3 are good alternative for Flash animation, since they don’t require any plug-ins and work with any modern browsers. I don’t think Flash would be dead any time soon, but I believe HTML5 and CSS3 would replace some light-weight animations such as banners, since Flash animation does not work well with mobile devices. I’m not certain what would happen if we combine HTML5 canvas and CSS Keyframes together, but I would imagine creating animation would be easier and more fun using these two technologies together.
Thank you very much for reading my blog posts, and I hope you enjoy reading them. 🙂