【CSS】軽量のCSSアニメーションライブラリcssanimation

CSS

cssanimation

April 15, 2018

cssanimationは非常に軽量のCSSアニメーションライブラリ。

Usage

cssanimation.cssもしくはcssanimation.min.cssファイルをインクルード。

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>CSS Animation Library for Developers and Ninjas</title> 
    <link href="cssanimation.min.css" rel="stylesheet">
</head> 
<body> 

</body>
</html>

アニメーション化する要素にcssanimationクラスとアニメーション名のクラスを追加します。フェードインの場合はfadeInを追加します。アニメーション名はhttps://cssanimation.io/で確認します。

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>CSS Animation Library for Developers and Ninjas</title> 
    <link rel="stylesheet" href="cssanimation.min.css">
</head> 
<body> 

   <h1 class="cssanimation fadeIn"> Example </h1> 

</body>
</html>

レターアニメーションが必要な場合はletteranimation.jsbodyを閉じる前に追加します。レターアニメーションでフェードインする場合はleFadeInを追加し、以下のようになります。

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>CSS Animation Library for Developers and Ninjas</title> 
    <link rel="stylesheet" href="cssanimation.min.css">
</head> 
<body> 

   <h1 class="cssanimation leFadeIn sequence"> Example </h1>
   <h1 class="cssanimation leFadeIn random"> Example </h1>

   <script type="text/javascript" src="letteranimation.js"></script>
</body>
</html>

infiniteクラスを追加することで無限ループさせることができます。

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>CSS Animation Library for Developers and Ninjas</title> 
    <link rel="stylesheet" href="cssanimation.min.css">
</head> 
<body> 

   <h1 class="cssanimation fadeIn infinite"> Example </h1> 

   <script type="text/javascript" src="letteranimation.js"></script>
</body>
</html>

MIT

Latest Posts

Related Posts