Mastering the Art of Cascading Style Sheets to Design Animations!

Posted by Admin on May 22, 2018 at 11:24 AM


By Sang Lee, STEM Teacher

Our high school students have been working on various projects as part of their ICS3U Introduction to Computer Science course. This course introduces students to industry-standard programming tools and allows them to explore and develop creative solutions to increase their understanding of computing.

Part of the course also included learning about Cascading Style Sheets (CSS), a computer language used for designing web pages. Without CSS, all websites would be rendered in plain text without any design elements.

CSS is a tough concept to master, especially when it comes to creating images and animations. In the past, simple animated GIFs were mostly used on websites; however, with the emergence of HTML5 and CSS, web developers can now use CSS to create such animations. The animation shown below is created solely through CSS by our Grade 10 student Daragh. It’s not easy to create such an animation. Within the code, there is a repetition control structure, which is a curriculum requirement. See if you can find it! If you need some animations for your website, try asking Daragh for assistance!

Scroll right to see the resulting animation: