example.css

* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    overflow: hidden;
}
.container{
    height: 100%;
    background-color: #efeff4;
}
.item{
    color: #ffffff;
    background-color: #000000;
}
.title{
    margin-top: 200px;
    text-align: center;
}

/**
 * copy from animate.css
 * https://daneden.github.io/animate.css
 */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}