向上滑动动画

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）