cft

Experimenting with basic CSS animations

Basic CSS styling & animations


user

Roberto Moreno Celta

6 days ago | 2 min read

I’m a big fan of web animations, but I didn’t use them because there was no visual guide (or at least an easy way) for me to look at what I needed and then implemented. In this post, I will teach you what I consider to be the basic CSS animations you will need in your projects, also some practical examples of how they look, and more.

CSS Animations

According to w3schools

“An animation lets an element gradually change from one style to another.”

I know this might seems basic, but there is a difference between transition/transform and animation in CSS, according to hubspot

CSS transitions are generally best for simple from-to movements, while CSS animations are for more complex series of movements. Before you can add either of these effects to your site, you need to consider which will do what you want.”

In this post we will be working with both of them, so don’t worry if most of these concepts don’t resonate with you.

The animation maker: “@keyframes“

Our friends in w3chool define this as “When you specify CSS styles inside the “@keyframes” rule, the animation will gradually change from the current style to the new style at certain times.”. So in this case I will name them the magic property that allows the user to create an animation (you will also need to name the animation here, but patience).

One example of how this might looks is this:

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

}

Which we are only specifying from which state we want to change the background-color to a brand new color. There are other ways of doing so. What I use most of the times is %, like:

@keyframes example {

0% {background-color: red;}

50% {background-color: yellow;}

100% {background-color: blue;}

}

Also, I add some other properties like movement or something else.

This is nice but, I just add this and hope it works?

Actually, this is the main focus of the animations, now we need to define the duration, delay, direction, and basically most of the properties animations have, for this I’ll have to reference again w3shool

  1. animation-name: Basically defines the name on the animation, the word outside the “@keyframes”.
  2. animation-duration“…defines how long time an animation should take to complete.”
  3. animation-delay: “…specifies a delay for the start of an animation.”
  4. animation-iteration-count“…specifies the number of times an animation should run.”
  5. animation-direction“…specifies whether an animation should be played forwards, backwards or in alternate cycles.”
  6. animation-timing-function: “…specifies the speed curve of the animation.” (More info of this on here)
  7. animation-fill-mode: “…specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).
  8. animation: This is basically where you can add the same rules as above but without specifying which is which, keeping in mind the animation rules will follow the same (hierarchy) as above.

Now that we understand more about this, how can we implement it?

In this pen I created I show some basic animations, feel free to play around with them, and create more if you want!

Bonus

The “skew()” property, according to MDN web docs, “…defines a transformation that skews an element on the 2D plane. Its result is a <transform-function> data type.

Upvote


user
Created by

Roberto Moreno Celta

Sr. Web UI Developer

Front End Dev, UX Designer & Snorlax supporter


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles