slide Up animation

Question

I'm trying to reproduce the top image animation

.nico{
    width: 350px;
    height: 200px;
    position:relative;
    overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div class="nico"><img class="animated slideInUp" src="http://lorempicsum.com/futurama/350/200/1" ></div>

But the result is quite different

Answer 1

By looking through the code in their website using the Developer Tools (which I strongly recommend you start doing), I was able to extract this code :

.nico{
    width: 350px;
    height: 200px;
    position:relative;
    overflow: hidden;
}
.is-animated {
    animation-duration: .9s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,75%,0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div class="nico"><img class="is-animated fadeInUp" src="http://lorempicsum.com/futurama/350/200/1" ></div>

I also made some changes to the classes (animated => is-animated, slideInUp => fadeInUp)