.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

.logo {
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
}

.logo:hover {
    -ms-transform: scale(1.12);
        transform: scale(1.12);
    -webkit-transform: scale(1.12);
}

.message:nth-child(1) {
    -webkit-animation: message1 1s ease;
            animation: message1 1s ease;
}

@-webkit-keyframes message1 {
    0% {
        opacity: 0;
        filter: blur(30px);
        -webkit-filter: blur(30px);
        -webkit-transform: translateY(500%) scale(0);
                transform: translateY(500%) scale(0);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        -webkit-transform: translateY(0%) scale(1);
                transform: translateY(0%) scale(1);
    }
}

@keyframes message1 {
    0% {
        opacity: 0;
        filter: blur(30px);
        -webkit-filter: blur(30px);
        -webkit-transform: translateY(500%) scale(0);
                transform: translateY(500%) scale(0);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        -webkit-transform: translateY(0%) scale(1);
                transform: translateY(0%) scale(1);
    }
}

.message:nth-child(2) {
    -webkit-animation: message2 1s ease;
            animation: message2 1s ease;
}

@-webkit-keyframes message2 {
    0%, 20% {
        opacity: 0;
        filter: blur(30px);
        -webkit-filter: blur(30px);
        -webkit-transform: translateY(500%) scale(0);
                transform: translateY(500%) scale(0);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        -webkit-transform: translateY(0%) scale(1);
                transform: translateY(0%) scale(1);
    }
}

@keyframes message2 {
    0%, 20% {
        opacity: 0;
        filter: blur(30px);
        -webkit-filter: blur(30px);
        -webkit-transform: translateY(500%) scale(0);
                transform: translateY(500%) scale(0);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        -webkit-transform: translateY(0%) scale(1);
                transform: translateY(0%) scale(1);
    }
}

.message:nth-child(3) {
    -webkit-animation: message3 1s ease;
            animation: message3 1s ease;
}

@-webkit-keyframes message3 {
    0%, 40% {
        opacity: 0;
        filter: blur(30px);
        -webkit-filter: blur(30px);
        -webkit-transform: translateY(500%) scale(0);
                transform: translateY(500%) scale(0);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        -webkit-transform: translateY(0%) scale(1);
                transform: translateY(0%) scale(1);
    }
}

@keyframes message3 {
    0%, 40% {
        opacity: 0;
        filter: blur(30px);
        -webkit-filter: blur(30px);
        -webkit-transform: translateY(500%) scale(0);
                transform: translateY(500%) scale(0);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        -webkit-transform: translateY(0%) scale(1);
                transform: translateY(0%) scale(1);
    }
}

.visible {
    -webkit-animation: visible 1s ease forwards;
            animation: visible 1s ease forwards;
}

@-webkit-keyframes visible {
    0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
        opacity: 1;
        visibility: visible;
    }
}

@keyframes visible {
    0% {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
        opacity: 1;
        visibility: visible;
    }
}

/* clock colon */
#colon {
    -webkit-animation: colon 1s steps(1) infinite;
            animation: colon 1s steps(1) infinite;
}

@-webkit-keyframes colon {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes colon {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}