滑动画

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>

我也做了一些修改的类（动画=>是动画的，slideInUp => fadeInUp）