Introduction to CSS Animations (With a Sprinkle of Vue.js)

What you’re getting into: A short introduction and a detailed video tutorial for getting started with CSS animations. I also added some basic Vue.js for some extra excitement. The video is 21 minutes long.

Introduction

Since launching and running the Daily CSS Images challenge, I’ve noticed that a lot of people have had a lot of fun by adding CSS animations to their images, which has been super cool to witness!

However, I am sure there are many other participants who see these animations and are wondering, “That looks cool…how do I do that?”

In fact, it wasn’t too long ago that I was in the same situation. I would see pens on Codepen with this weird thing called “@keyframes”, and I thought to myself, “Sure would be nice to know what this all means...”

After some study and practice, I quickly realized that CSS animations were actually very easy to get started with. Once you get the basic concept, it’s exciting and you can let your imagination and creativity run wild!

My hope is that this tutorial helps people who were in the same boat as me, wanting to learn CSS animation, but a bit unsure. I hope that it will animate you to return to making CSS images with excitement to add some extra personal touch through…