Pop In Effect with CSS Keyframe Animation

Building custom animations is easy with CSS3′s Keyframe property. In this tutorial I’m going to show you how to create a small “pop in” animation.

The code below will define the animation needed for our effect.

@-webkit-keyframes pop-in {
0% { opacity: 0; -webkit-transform: scale(0.5); }
100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes pop-in {
0% { opacity: 0; -moz-transform: scale(0.5); }
100% { opacity: 1; -moz-transform: scale(1); }
}
@keyframes pop-in {
0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}

As you can tell the custom keyframe code has huge potential for lots of effects happening all at once, for more detail check out CSS-Trick’s Article.

Now that our animation has been defined we have to apply it to a class. This can be done by adding the following code below to any style.

-webkit-animation:pop-in 0.5s;
-moz-animation:pop-in 0.5s;
-ms-animation:pop-in 0.5s;

These are the bare essentials needed for a pop-in animation, feel free to experiment with different effects, transition timing, and styles.

Feel free to leave an example of a pop-in effect in the comments

  • coderguy

    Bad code.. right one:

    @keyframes pop-in {
    0% { opacity: 0;transform: scale(0.1); }
    100% { opacity: 1;transform: scale(1); }
    }
    @-webkit-keyframes pop-in {
    0% { opacity: 0;-webkit-transform: scale(0.1); }
    100% { opacity: 1;-webkit-transform: scale(1); }
    }
    @-moz-keyframes pop-in {
    0% { opacity: 0;-moz-transform: scale(0.1); }
    100% { opacity: 1;-moz-transform: scale(1); }
    }

  • vjdob

    Hi coderguy,
    i try your code but it doesn’t work…

  • chris

    WOW Man, works perfectly! Thanks for that!!!

  • chris

    but seems to mee, that the code from coderguy is the right way!