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 animations.

Getting Started With CSS Animations

Moving Forward

I plan on making more videos like this to be of assistance along the Daily CSS Images challenge. If you have any recommendations, respond to this post and let me know. Update (3/14/17): Added a 100% free pure CSS images video course

As far as moving further along with CSS animations, I plan on releasing more videos that go into more detail and really focus on stretching your imagination that I hope will really bolster your skill-set.

For now, think of how CSS animation can be cleverly used to some real value and purpose. As always, don’t overwhelm yourself. Instead, try to practice adding CSS animations piece by piece.


Cheers,
Mike Mangialardi