CSSのanimationプロパティでできるアニメーション20選

マークアップ言語は非常に奥が深く、いろんな表現やアニメーションも簡単な記述でできてしまうので、知識のアップデートは欠かさず行うようにしています。

そこで今回の記事では、よく使うCSSのアニメーションを20個紹介します。

どれもCSSのみで実装が可能で、全てのサンプルはウィンドウ内に表示されるとアニメーションが開始されます。それぞれのアニメーションを再度みたい場合は、上に戻ってからもう一度下にスクロールしてご覧ください。

かかかず
かかかず

コピペして使うには、対象のCSSをコピーして、アニメーションを付けたい要素にそのclass名を付ければOKです。

フェードイン系アニメーション

フェードインして表示されるアニメーションです。

透明から徐々に表示

opacity プロパティを使って、透明度「0% → 100%」へ変化していくスニペットです。

アニメーションが激しくないので、汎用性が高く使い勝手もいいアニメーションです。

要素

コードを表示する

CSS

/* opacityFadeIn */
.opacityFadeIn {
    animation: opacityFadeIn 0.7s ease 0s 1 normal;
}

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

下から上にふわっと表示

transform のプロパティで、Y方向の移動を加えて下から上にふわっと表示させます。

translateY の数値を変えると、アニメーションの度合いや方向を変えられます。

要素

コードを表示する

CSS

.fadeIn {
animation: fadeIn 0.7s ease 0s 1 normal;
}

/* fadeIn */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

下から上に表示され少し揺れる

下から勢いよく表示されるスニペットで、translate3d で要素の表示位置を移動させます。

要素

コードを表示する

CSS

.bounceInUp {
    animation: bounceInUp 1.0s ease 0s 1 normal;
}
/* bounceInUp */
@keyframes bounceInUp {
    0,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(0.215,.61,0.355,1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0) scaleY(5)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(0.9)
    }
    75% {
        transform: translate3d(0, 10px, 0) scaleY(0.95)
    }
    90% {
        transform: translate3d(0, -5px, 0) scaleY(0.985)
    }
    100% {
        transform: translateZ(0)
    }
}

下から上にあがってきて拡大

下から上にあがってくるのは、transform: translateY で設定し、拡大は同じtransform プロパティの scale で拡大をさせます。

要素

コードを表示する

CSS

.zoomBottomUp {
    animation: zoomBottomUp 1.0s ease 0s 1 normal;
}
/* zoomBottomUp */
@keyframes zoomBottomUp {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

上から下にふわっと表示

上から下に落ちてくるように表示するスニペットです。

transform: translateY の数値を0からの差を小さくすることで、ふわっとな感じにしています。

要素

コードを表示する

CSS

/* fadeInTop */
.fadeInTop {
    animation: fadeInTop 0.7s ease 0s 1 normal;
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
  }
}

上からひょいと落ちてきて表示

上からひょいと落ちてくる、比較的早い動きをするスニペットです。

要素

コードを表示する

CSS

.top-in-basic {
    animation: top-in-basic 1 0.4s 0s;
}
/* top-in-basic */
@keyframes top-in-basic {
  0%{transform: translateY(-2000px)}
  100%{transform: translateY(0px)}
}
@keyframes left-in-basic {
  0%{transform: opacity(0.4)}
  100%{transform: opacity(1)}
}

上から落ちてきて拡大

上からゆっくりと落ちてきて、最後に拡大します。この辺りの動きは、全てtransform プロパティで表現できてしまいます。

要素

コードを表示する

CSS

.toptobottomScale {
    animation: toptobottomScale 1.4s ease 0s 1 normal;
}
/* toptobottomScale */
@keyframes toptobottomScale {
    0% {
        transform: translateY(-1200px) scale(0.7);
        opacity: .7
    }
    80% {
        transform: translateY(0) scale(0.7);
        opacity: .7
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

左から右にふわっと表示

左から右にふわっとフェードインします。

要素

コードを表示する

CSS

.fadeInLeft {
    animation: fadeInLeft 0.7s ease 0s 1 normal;
}
/* fadeInLeft */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
  }
}

右から左にふわっと表示

右から左にふわっとフェードインします。

要素

コードを表示する

CSS

.fadeInRight {
    animation: fadeInRight 0.7s ease 0s 1 normal;
}
/* fadeInRight */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
  }
}

中央から外に伸びて表示

transform:scaleX を使って、中央から外側に向かって要素が広がるスニペットです。

要素

コードを表示する

CSS

.transscaleX {
    animation: transscaleX 1.7s ease 0s 1 normal;
}
/* transscaleX */
@keyframes transscaleX {
  0% {
    transform:scaleX(0);
  }
  100% {
    transform:scaleX(1);
  }
}

逆時計回りに少し回って表示

少し動きが大きめのアニメーションで、transform の回転をさせる rotate を使って回転させたスニペットです。

要素

コードを表示する

CSS

.load {
    animation: load 2.2s ease 0s 1 normal;
}
/* load */
@keyframes load{
  0%{
    transform:translateX(30px) rotate(30deg) ;
  }
  
  100%{
    opacity:1;
    transform:translateX(0px) rotate(0);
  }
}

左上から徐々に大きくなって表示

アニメーションに width height をそれぞれ指定して、徐々にサイズを大きくしbox-shadow も付けて立体感をつけたスニペットです。

要素

コードを表示する

CSS

.zoom {
animation: zoom 4s ease-in-out normal;
}
/* zoom */
  @keyframes zoom {
  0% {
    width: 80px;
    height: 80px;
    background: #f0f0f0;
    box-shadow: 0 0 0 #cccccc, 0 0 0 #ffffff, 10px 10px 10px #cccccc inset, 0 0 0 #ffffff inset;
  }
  25% {
    width: 80px;
    height: 80px;
    background: #f8f8f8;
    box-shadow: 10px 10px 10px #cccccc, 10px 10px 10px #ffffff, 0 0 0 #cccccc inset, 0 0 0 #ffffff inset;
  }
  50% {
    width: 80px;
    height: 200px;
    background: #f8f8f8;
    box-shadow: 10px 10px 10px #cccccc, 10px 10px 10px #ffffff, 0 0 0 #cccccc inset, 0 0 0 #ffffff inset;
  }
  75% {
    width: 100%;
    height: 200px;
    background: #6b7784;
    box-shadow: 20px 20px 20px #cccccc, 0 0 0 #ffffff, 0 0 0 #cccccc inset, 2px 2px 2px #ffffff inset;
  }
  100% {
    box-shadow: none
  }
}

かかかず
かかかず

動きも多くついたスニペットですが、意外に収まりの良いアニメーションです。

くるくる回って表示

目がチカチカしそうですが、くるくる回って表示させるスニペットです。

くるくる回るのは、奥行きを与えるtransformperspectiveと、回転の rotate を使います。

要素

コードを表示する

CSS

.flip {
    animation: flip 1.4s ease 0s 1 normal;
}
/* flip */
@keyframes flip {
    0% {
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        animation-timing-function: ease-out
    }
    40% {
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out
    }
    50% {
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in
    }
    80% {
        transform: perspective(400px) scale3d(0.95, .95, 0.95) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }
    100% {
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }
}

ズームして表示

scale3d を使って、徐々に大きくなって表示されるスニペットです。

要素

コードを表示する

CSS

.zoomIn {
    animation: zoomIn 1.0s ease 0s 1 normal;
}
/* zoomIn */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, .3, 0.3)
    }
    50% {
        opacity: 1
    }
}

断続的に動きを繰り返すアニメーション

ここからは、断続的に動きを繰り返すアニメーションです。

元気よく震える

transform: rotateZ を使って、要素が元気よく震えるように動くアニメーションです。

要素

コードを表示する

CSS

.shivering {
  animation: shivering 2s linear infinite;
}

/* shivering */
@keyframes shivering {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

ふわふわ上下に浮く

transform: translateY を使って、平面的に上下にフワフワ浮くように動くアニメーションです。

数値を変えると、上下の動く幅が大きくなります。

要素

コードを表示する

CSS

.fuwafuwa {
    animation: fuwafuwa 3s linear infinite;
} 
/* fuwafuwa */
@keyframes fuwafuwa {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(10px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}

立体的に浮く

transform: translatey で上下に浮く感じを作り、それにbox-shadow の影で立体感を作ったアニメーションです。

要素

コードを表示する

CSS

.float {
animation: float 6s ease-in-out infinite;
}

/* float */
@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
    transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
    transform: translatey(0px);
  }
}

色が変わる

背景の色が徐々に変わるスニペットで、全て background-color だけで変化させています。

要素

コードを表示する

CSS

.colorchange {
animation: colorchange 8s ease-in-out infinite;
}
/* colorchange */
@keyframes colorchange {
  0%   {background-color:#6b7784;}
  25%  {background-color:#ffff58;}
  50%  {background-color:#6bb6ff;}
  75%  {background-color:#004e00;}
  100% {background-color:#6b7784;}
}

拡大・縮小を繰り返す

transformscale で拡大・縮小をさせたスニペットです。

要素

コードを表示する

CSS

.zoomFade {
animation: zoomFade 2s ease-in-out infinite;
}
/* zoomFade */
@keyframes zoomFade {
    0% {
        transform: scaleX(1)
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        transform: scaleX(1)
    }
}

要素がブラブラに揺れる

transform: rotate の数値をいじって、要素がブラブラ揺れるアニメーションのスニペットです。

要素

コードを表示する

CSS

.swing {
animation: swing 2s ease-in-out infinite;
}
/* swing */
@keyframes swing {
    20% {
        transform: rotate(15deg)
    }
    40% {
        transform: rotate(-10deg)
    }
    60% {
        transform: rotate(5deg)
    }
    80% {
        transform: rotate(-5deg)
    }
    100% {
        transform: rotate(0deg)
    }
}

さいごに

いかがでしたでしょうか?

CSSのアニメーションは、このように簡単な記述で動きができてしまいますが、過剰にやりすぎてしまうと逆にストレスにもなってしまうので注意しましょう。

かかかず
かかかず

いいものがあったら是非使ってみてください。

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影