ズームアウトしながら画像表示させるアニメーションをCSSで実装してみました。
近年ヌルヌル動くサイトが多いので、1つの画像表示のサンプルにどうぞ!
ズームアウトしながら画像表示させるアニメーションをCSSで実装する
要素が見えた瞬間に、classを追加するJSの説明は省きます。
「inview」を使用しています。
HTML
<p><img class="img" src="https://ninjinmilk.com/wp-content/uploads/2022/01/5oZJuItF_400x400-1.jpg" alt=""></p>
CSS
.img{
transition: 3s;
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
transform: scale(1.2);
}
p{
width: 400px;
overflow: hidden;
}
p.active .img{
transform: none;
opacity: 1;
}
実装デモ
実際に動かしてみるとこんな感じです。
ABOUT ME