【コピペ可】すぐに使えるCSSアニメーション集

2022年5月8日2022年5月24日

最低限のアニメーションをつけたい時に、毎回記述するのは面倒だなあと思うアニメーションを集めました。コピペして、無駄を省いていきましょう。

基本の使い方

後述する@keyframesのコードを読み込んだ後、任意の要素にanimationプロパティで読み込んだ@keyframesに対応するアニメーション名を記述して、アニメーションさせたい要素にクラスをつけてください。

@keyframesだけで構成されています。animationを理解している方は自由にカスタマイズしてご利用ください。

@keyframesの元コード

@keyframes zoomIn{
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

CSSのサンプルコード

.zoomIn {
    animation: zoomIn .3s linear;
}

HTMLのサンプルコード

<div class="zoomIn" style="background: black; width: 200px; height: 200px;"></div>

ズームイン（拡大しながら現れる）

ズームインのデモ動画

@keyframes zoomIn{
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

ズームアウト（縮小しながら消える）

ズームアウトのデモ動画

@keyframes zoomOut{
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

フェードイン（段々と不透明になり現れる、ふわっと表示）

フェードインのデモ動画

@keyframes fadeIn{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

フェードインアップ（段々と不透明になり下から上に現れる、ふわっと浮き上がる表示）

フェードインアップのデモ動画

@keyframes fadeInUp{
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

フェードアウト（段々と透明になり消える、ふわっと非表示）

フェードアウトのデモ動画

@keyframes fadeOut{
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

フリップインX（X軸に回転しながら表示）

フリップインXのデモ動画

@keyframes flipInX{
    0% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

スライドインライト（右からスライドしながら現れる）

スライドインライトのデモ動画

@keyframes slideInRight{
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(0);
    }
}

スライドアウトレフト（左にスライドしながら消える）

スライドアウトレフトのデモ動画

@keyframes slideOutLeft{
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100vw);
    }
}

より細かなアニメーションを手軽に使いたい場合はanimate.cssを使うのがおすすめです。

https://animate.style/