blog ブログ

TOP ＞ blog ＞【初心者向け】CSSで簡単なアニメーションを作ろう

2024.10.28

【初心者向け】CSSで簡単なアニメーションを作ろう

WEB

sochan

こんにちは、デザイナーのsochanです。

今回は簡単に動きをつけたいときに役に立ちそうなCSSのみで動くアニメーションをご紹介します。

スクロールで画面内に入ったときに作動させるにはJavaScriptなどで調整する必要がありますが、
ファーストビューで少し動きを付けたい時、テキストや装飾を動かしたいという時に役に立つかなと思います。

Javascriptを使わずにアニメーションを付けることができる、「CSSスクロールに合わせたアニメーションを作ろう」もありますのでこちらも参考にどうぞ！

2024-11-12

【初心者向け】CSSスクロールに合わせたアニメーションを作ろう

@keyframesとanimationで呼び出す

@keyframesで定義
animationで呼び出す
が基本になります。

【@keyframes】

0%はアニメーションの開始、100%は終了を意味しています。


@keyframes [アニメーション名（なんでもよい）] {
    0% {
        [プロパティ]: [値];
    }
    100% {
        [プロパティ]: [値];
    }
}

【animationプロパティ】

指定できる設定は以下↓↓

アニメーション名（なんでもよい） [ animation-name ]
開始〜終了までの時間 [ animation-duration ]
動き方 [ animation-timing-function ] ※ease-in ease-out など
開始までの時間 [ animation-delay ]
繰り返す回数 [ animation-iteration-count ]
終了後に逆再生・反転するか [ animation-direction ]
再生前後にスタイルを適用するか [ animation-fill-mode ]

animationプロパティは一括で指定することもできる


.fadeIn {
 /* 一括指定 */
  animation:fadeIn 2s ease-in 1s 3 nomal forwards;
  （名前）（時間）（動き方）（開始時間）（繰り返し）（終了後に逆再生するか）（再生前後にスタイル）

  /* 分解 */
  animation-name: fadeIn; /* 名前 */
  animation-duration: 2s; /* 時間 */
  animation-timing-function: ease-out; /* 動き方 */
  animation-delay:1s; /* 開始時間 */
  animation-iteration-count: 3; /* 繰り返し */
  animation-direction:nomal; /* 終了後に逆再生するか */
  animation-fill-mode: forwards; /* 再生前後にスタイル */
}

基本的なアニメーション

フェードインするよ


/*** CSS ***/
.fadeIn {
  animation-name: fadeIn; /* アニメーション名 */
  animation-duration: 2s; /* 開始から終了までの時間 */
  animation-timing-function: ease-out; /* 動き方 */
  animation-fill-mode: forwards; /* 始まる前、終わった後の状態 */
  animation-iteration-count: infinite;/* 繰り返す */
/* 以下装飾 */
  color: #000;
  background-color: #FFCA36;
  padding: 10px;
  text-align: center;
}

@keyframes fadeIn {
    0% {
      opacity: 0;/* 開始時透明度 */
      transform: translateY(20px);
    }
    100% {
      opacity: 1;/* 終了時透明度 */
      transform: translateY(0);
    }
}

フェードアウトするよ


/*** CSS ***/
.fadeOut {
  animation-name: fadeOut; /* アニメーション名 */
  animation-duration: 2s; /* 開始から終了までの時間 */
  animation-timing-function: ease-out; /* 動き方 */
  animation-fill-mode: forwards; /* 始まる前、終わった後の状態 */
  animation-iteration-count: infinite;/* 繰り返す */
/* 以下装飾 */
  color: #000;
  background-color: #FFCA36;
  padding: 10px;
  text-align: center;
}

@keyframes fadeOut {
    0% {
      opacity: 1;/* 開始時透明度 */
      transform: translateY(0);
    }
    100% {
      opacity: 0;/* 終了時透明度 */
      transform: translateY(20px);
    }
}

ふわふわするよ


/*** CSS ***/
.fuwafuwa {
  animation-name: fuwafuwa; /* アニメーション名 */
  animation-duration: 2s; /* 開始から終了までの時間 */
  animation-timing-function: ease-in-out; /* 動き */
  animation-iteration-count: infinite;/* 繰り返す */
/* 以下装飾 */
  color: #000;
  background-color: #FFCA36;
  border-radius: 100%;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}


@keyframes fuwafuwa {
    0%,100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(20px);
    }
}

横にふわふわするよ


/*** CSS ***/
.fuwafuwa-yoko {
  animation-name: fuwafuwa-yoko; /* アニメーション名 */
  animation-duration: 2s; /* 開始から終了までの時間 */
  animation-timing-function: ease-in-out; /* 動き */
  animation-iteration-count: infinite;/* 繰り返す */
/* 以下装飾 */
  color: #000;
  background-color: #FFCA36;
  border-radius: 100%;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}


@keyframes fuwafuwa-yoko {
    0%,100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(20px);
    }
}

のびるよ


/*** CSS ***/
.move-yoko {
  animation-name: move-yoko; /* アニメーション名 */
  animation-duration: 2s; /* 開始から終了までの時間 */
  animation-timing-function: ease-in-out; /* 動き */
  animation-iteration-count: infinite;/* 繰り返す */
/* 以下装飾 */
  color: #000;
  background-color: #FFCA36;
  padding: 20px ;
}

@keyframes move-yoko {
    0% {
      width: 100px;
    }
    100% {
     width: 100%;
    }
}

ズームインするよ


/*** CSS ***/
.zoomIn {
  animation-name: zoomIn; /* アニメーション名 */
  animation-duration: 2s; /* 開始から終了までの時間 */
  animation-timing-function: ease-in-out; /* 動き */
  animation-iteration-count: infinite;/* 繰り返す */
/* 以下装飾 */
  color: #000;
  background-color: #FFCA36;
  text-align: center;
  padding: 20px;
}

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

くるくるするよ


/*** CSS ***/
.square {
  animation-name: square; /* アニメーション名 */
  animation-duration: 2s; /* 開始から終了までの時間 */
  animation-timing-function: ease-in-out; /* 動き */
  animation-iteration-count: infinite;/* 繰り返す */
/* 以下装飾 */
  color: #000;
  background-color: #FFCA36;
  margin:0 auto;
　display: flex;
  justify-content: center;
  align-items: center;
　width:200px;
　height:200px;
}

@keyframes square {
    0% {
       transform : rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
       transform : rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

ふにゃふにゃ動くよ


/*** CSS ***/
.soft {
  animation-name: soft; /* アニメーション名 */
  animation-duration: 4s; /* 開始から終了までの時間 */
  animation-timing-function:  linear; /* 動き */
  animation-iteration-count: infinite;/* 繰り返す */
/* 以下装飾 */
  color: #000;
  background-color: #FFCA36;
  margin:0 auto;
　display: flex;
　justify-content: center;
　align-items: center;
　width:200px;
　height:200px;
}

@keyframes soft {
    0%,100% {
      border-radius: 40% 60% 40% 50% / 60% 60% 50% 60% ;
    }
 　　25% {
       border-radius: 35% 64% 58% 43% / 85% 34% 68% 17% ;
    }
    50% {
       border-radius: 74% 25% 30% 69% / 46% 77% 49% 56% ;
    }
}

まとめ

CSSで簡単に動きを付けることができ、複雑な設定も不要なので便利です！！
今回はシンプルな動きの例が多かったですが、@keyframesの設定を変更して
色々な動きを試してみても楽しいですね！

日の出医療福祉グループクリエイティブ室では医療・介護・保育を始めとする医療福祉業界の様々な制作をおこなっています。
気になった方はお気軽にお問い合わせからご相談ください。

お問い合わせはこちら