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 using CSS.

Custom animations in CSS can be defined by writing what effect to apply at what percentage the animation is at. This is as simple as using the CSS @keyframes property.

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

@keyframes pop-in {
     0% { opacity: 0; transform: scale(0.1); }
     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.

.your-element {
     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