滑動畫

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）