DEV Community

loading...
Cover image for Head start with CSS Animation with examples

Head start with CSS Animation with examples

danywalls profile image Dany Paredes Updated on ・2 min read

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%;
    }
}
Enter fullscreen mode Exit fullscreen mode

2- Connect my keyframes with an element

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

animation-name: myanimation;
animation-duration: 3s;
Enter fullscreen mode Exit fullscreen mode

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

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;
Enter fullscreen mode Exit fullscreen mode

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

animation-fill-mode: fowards;
Enter fullscreen mode Exit fullscreen mode

For both situations the use both keyword.

animation-fill-mode: both;
Enter fullscreen mode Exit fullscreen mode

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:

If you enjoyed this post, share it!

Image thanks Gensa Hub.

Discussion (0)

pic
Editor guide