A popup box using HTML5 and CSS3

The popup appears in the bottom right corner of the page after a short delay. You can make it disappear by setting the CSS bottom property to -90px again.

The CSS code:
<style>
    div#popup {
        background-color: rgba(0,0,0,0.75);
        color: white;
        min-width: 225px;
        height: 85px;
        right: 10px;
        bottom: -90px;
        box-sizing: border-box;
        position: fixed;
        transition: bottom ease-out .5s;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        padding: 15px;
        font-size: 16pt;
        font-family: Arial, sans-serif;
    }
</style>
The HTML code:
<div id="popup">
    <b>A popup!</b>
</div>
The Javascript that triggers the popup:
<script>
    // The timer that changes the position of the
    // popup after a short delay
    setTimeout(function ()
    {
        document.getElementById('popup').style.bottom = 0;
    },1500)
</script>

Back to the blog article