向上滑动动画

Question

我正在尝试重现顶图动画

.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>

但结果却截然不同

Answer 1

通过使用开发人员工具（我强烈建议您开始这样做）查看他们网站上的代码，我能够提取此代码：

.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>

我还对类 (animated => is-animated, slideInUp => fadeInUp)

做了一些修改

向上滑动动画

slide Up animation

css

slideup