Member-only story

THE DEFINITIVE GUIDE

Your First CSS Animation

So you want to get started with CSS Animations

Twan Mulder
Prototypr
Published in
4 min readSep 19, 2019

Let’s say you’re building your very first website. You’ve created your basic elements using HTML, added some pretty styling using CSS. Maybe you have even added some media-queries.

But there’s still something missing .

A little flair.

A little personality.

That’s where CSS Animations come into play!

Introduction

CSS Animations sure are something pretty. Using just a few lines of code we can make elements bounce, move, rotate, or even disappear.

Every single animation consists of 2 parts.

The first step is creating the animation using so called “keyframes”.

The second one is adding this animation to an element and setting its animations “properties”.

Follow Along

So to follow along with this article you can open up your own text editor, but I also created a couple of Sandboxes for you to follow along without having to touch any code yourself.

These are the steps we will be following:

  • Creating an animation using keyframes

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by Twan Mulder

Frontend Developer who loves creating enticing experiences | Employed at De Bijenkorf

Responses (3)

What are your thoughts?