使えるアニメーションcss | 【福岡】LP・ランディングページ・ホームページ制作|セルピー

使えるアニメーションcss

CSSで使えるいくつかのアニメーションライブラリやエフェクトを紹介します。これらのリソースは、ウェブサイトやアプリのアニメーションを追加するのに役立ちます。

Animate.css

https://animate.style/

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>