CSSで使えるいくつかのアニメーションライブラリやエフェクトを紹介します。これらのリソースは、ウェブサイトやアプリのアニメーションを追加するのに役立ちます。
Animate.css
Animate.cssは、さまざまなアニメーションを提供する人気のあるCSSライブラリです。シンプルなクラスを追加するだけで、要素にフェードイン、スライド、バウンスなどのアニメーションを簡単に適用できます。
実例(バウンス)
Bouncing Element
↑アニメーションの「bounce」を指定。
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
リンク先
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
実例(2)
Growing Link↑アニメーション「grow」を使用。
使用例
<div class="animate__animated animate__bounce">Bouncing Element</div>
インストール方法
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
使用例
<a href="#" class="hvr-grow">Growing Link</a>