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
  }
}

かかかず

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

くるくる回って表示

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

くるくる回るのは、奥行きを与えるtransform のperspectiveと、回転の 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;}
}

拡大・縮小を繰り返す

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

要素

コードを表示する

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)
    }
}