comment 0

Animated Images Using Pure HTML and CSS

Came across this question on twitter today and my interest was piqued.

Anyone feel like sharing their favorite conference talks from this year? #CodeNewbie @virengb

So I went across to YouTube to see what has been happening in that space recently and came across this nice talk – Paint the Web with CSS – Eva Lettner @ WeAreDevelopers Conference 2017. It was short, fun, educational and telling. My key takeaways were

  1. Make the web a better and more beautiful place
  2. Learning can and should be fun
  3. It is not recommended to do this in production as you are better off using SVG graphics
  4. The internet is full of opportunities to learn and to share what you know

So I decided to put this to practice. I created a scene where the Trinidad flag is raised, the sun rises and then sets behind the northern range, and then the flag is lowered. I am missing a man walking across to handle the flag though. Share your thoughts with us in the comments below. My code which has not been tested thoroughly is here. The recorded animation is below on my YouTube channel.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s