Dany Paredes
Dany Paredes | Javascript / Web

Dany Paredes | Javascript / Web

Head start with CSS Animation with examples

Head start with CSS Animation with examples

Dany Paredes's photo
Dany Paredes
·Jan 6, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

I continue fixing my CSS weakness and today is time for the CSS Animation.

CSS help us create animation using the keyword @keyframes , it helps to set the initial state for properties and the amount of time it will get during the animation.

We change size, color, size, visibility and more properties.

##1- Create my keyframe animation

The keyframes require the name and using from to help us to scope from begin to end which properties are modified.

For example the animation myanimation, change border radius from 0 to 50%.

@keyframes myanimation {
    from {
        border-radius:0px
    }
    to {
        border-radius: 50%;
    }
}

{% jsfiddle jsfiddle.net/danywalls4/ubxfo490/5 result,html,css %}

2- Connect my keyframes with an element

My element needs to know the animation-name and animation-duration.

animation-name: myanimation;
animation-duration: 3s;

{% jsfiddle jsfiddle.net/danywalls4/ubxfo490/7 result,html,css %}

Another way for write your animation is with % instead from to, because it is flexible to future changes.

{% jsfiddle jsfiddle.net/danywalls4/ubxfo490/43 result,html,css %}

An Others' properties is animation-delay and animation-iteration-count, these 2 are not required but help us to create nice effects.

  • animation-delay: start animation after delay;

  • animation-iteration-count: set how many times is the animation run but by default 1, it can be changed by other numbers values or infinite to not stop.

Some times we want to start elements with the keyframe state for these case use animation-fill-mode with the value backwards.

animation-fill-mode: backwards;

If you want to keep the last element state use option fowards.

animation-fill-mode: fowards;

For both situations the use both keyword.

animation-fill-mode: both;

That's it!

This is a quick overview with animation in CSS, you can play with it and build great animation in css like that:

{% jsfiddle jsfiddle.net/danywalls4/ubxfo490/80 result,html,css %}

If you enjoyed this post, share it!

Image thanks Gensa Hub.

 
Share this