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 shown (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!

The sharing widget on this siite 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 snippet):

    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;

As you can see there's not a whole lot to it - so lets break it down. The background-color, color, height are pretty self explanatory. If you need a bigger or smaaller 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 an animation when the specified property changes. So 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 lets put all the 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 .