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

css

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

基本の使い方

後述する@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/