コピペできるCSSアニメーションのスニペット

WEB Tips
スポンサーリンク

vov.css

VOV.CSS

<head></head>にcssを読み込みます。CDNで呼び出すこともできます。

<link rel="stylesheet" href="vov.min.css">

使い方はアニメーションさせたい要素にクラスを追加

<h1 class="vov flash">sample animations</h1>

時間、遅延、回数なども指定可能。

CSS ANIMO

CSS Animo
CSS Animations

ホバーエフェクト、ローディングなどのアニメーションがクリックするとコピーできます。

Animista

Animista - CSS Animations on Demand
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.

アニメーションの動作を確認ながら細かい調整ができます。右上の{・}からソースを確認できます。

Keyframes

Keyframes.app | CSS Toolbox
Keyframes helps you write better CSS with a suite of tools to create CSS @Keyframe animations, box shadows, colors, & more

アニメーション、シャドウ、カラーを作れるジェネレータ。

Izmir Hover Effects

https://ciar4n.com/izmir/

画像ホバースタイルを簡単に実装できるミニCSSライブラリ。

こちらも豊富なホバースタイルが揃っていてデモを確認できます。

https://tipsy.github.io/bubbly-bg/

泡がユラユラ漂う背景アニメ。

<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script>
<script>bubbly();</script>

オプション指定可能

bubbly({
    animate: false, // アニメション無効にする デフォルトはtrue
    blur: 1, // ぼかし具合 デフォルト 4
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
    bubbles: 100, // デフォルトは Math.floor((canvas.width + canvas.height) * 0.02);
    canvas: document.querySelector("#background"), // default is created and attached
    colorStart: "#4c004c", // default is blue-ish
    colorStop: "#1a001a",// default is blue-ish
    compose: "lighter", // デフォルト
    shadowColor: "#0ff", // デフォルトは #fff
    angleFunc: () => Math.random() * Math.PI * 2, // デフォルト
    velocityFunc: () => 0.1 + Math.random() * 0.5, // デフォルト
    radiusFunc: () => 4 + Math.random() * 25 // デフォルトは 4 + Math.random() * width / 25
});

タイトルとURLをコピーしました