HTML5 Effects: An example of a popup using CSS transitions

Written by Richard Heyes, on 19th June 2017

This is an example of a popup that uses CSS transitions to animate the transition from the popup being hidden to being visible (in this case in the bottom right corner of the page).

Popup DIVs are a common sight these days - used for anything from social media widgets to showing alerts. CSS Transitions make animating these little widgets very easy to do - as the actual animating consists of a single line of CSS - so not very hard at all!

A sharing widget that was once on this site in the bottom right-hand side corner is a perfect example of this sort of thing. Here's a breakdown of the CSS code that makes up the box (this is a bare-bones example):

<style>
    div#popup {
        background-color: rgba(0,0,0,0.75);
        color: white;
        min-width: 225px;
        height: 85px;
        right: 10px;
        bottom: -90px;
        position: fixed;
        transition: bottom ease-out .5s;
    }
</style>

As you can see there's not a whole lot to it - so let's break it down. The background-color, color, and height properties are pretty self-explanatory. If you need a larger or smaller height - feel free to change it.

The min-width property is used in place of width to allow the box to grow in width if necessary.

The right and bottom properties specify the initial position - which in this case is 10px from the right-hand side and -90px in relation to the bottom edge of the screen - ie it's initially positioned off-screen.

The fixed position setting means that the DIV box will be positioned in relation to the visible browser window - not the entire page regardless of how large it is.

And finally there's the transition setting - which doesn't trigger an animation it just stipulates the animation when the specified property changes. Here, the bottom property is given - so when that changes it will be animated, gradual change instead of an immediate one. The ease-out argument specifies the type of animation and the .5s specifies the time taken for the animation to complete.

There's also a piece of delayed JavaScript code that changes the bottom property after a little delay - and the transition specified above handles the animation.

An example

So let's put all this together in a small animation that's triggered by the following button:

This example had to have a lot of things changed to work it into the middle of the page - so here's a standalone page that serves as an example too .