初心者のWebポートフォリオ作ってみたー②アニメーション

はじめに

今回は、サイトに動きを付けるためにcssを用いてアニメーションを色々試してみました。
この記事では、animation プロパティと @keyframes を使ってCSSだけでできるアニメーションをまとめました。

@keyframes について

アニメーションを動かすためには、@kyeframesを用いて、アニメーション開始から終了するまでどのようなアニメーションをするのか指定を行います。

@kyeframesは以下のように記述します。

 @keyframes 任意の名前 {
  0% {
       開始時の動きの指定
  }
  100% {
       終了時の動きの指定
  }
}

動きの指定には、透過やtransformなどを用います。

animationプロパティ

@keyframes で指定したアニメーションとアニメーション開始から終了までの時間を指定するにはanimation プロパティで指定します。

@keyframes ではアニメーションの開始時と終了時の動きのみを指定し、animation プロパティで適用するアニメーションやアニメーションの時間などを指定します。

プロパティ	読み方
animation-name	アニメーションの名前を指定
animation-duration	アニメーションが始まって終わるまでの時間を指定
animation-timing-function	アニメーションの進行の度合いを指定
animation-delay	アニメーションが始まる時間を指定
animation-iteration-count	アニメーションの繰り返し回数を指定
animation-direction	アニメーションの再生方向を指定
animation-fill-mode	アニメーションの開始前、終了後のスタイルを指定
animation-play-state	アニメーションの再生・停止を指定
animation	上記、8つのプロパティを一括で指定できる、ショートハンドプロパテ

アニメーション

例えば、横にスライドするような動きを作る際は下記のようなコードになります。

@kyeframe

@keyframes scale-up-hor-left {
  0% {
            transform: scaleX(0.4);
            transform-origin: 0% 0%;
  }
  100% {
            transform: scaleX(1);
            transform-origin: 0% 0%;
  }
}

animationプロパティ

.任意のクラス名{
animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

ドロップシャドウのある図形を拡大・縮小させる動きは以のようになります。

@kyeframe

@keyframes shadow-drop-center {
  0% {
            transform: translateZ(0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
            transform: translateZ(50px);
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
｝

animationプロパティ

.任意のクラス名{
animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

このように、@kyeframesとanimationプロパティを合わせることで色々な動きができます。