CSSアニメーションを色々試してみる

2020年12月27日2021年2月13日

Webアプリの改良に頭を悩ませているshinです。

最近は、この前作ったくじ引きアプリに色々改良を加えていっています。

Djangoでくじ引きアプリを作ってみる_part14

その中で、くじ引きを実行するときにアニメーションがあるとかっこいいなと思ったので、色々試している最中です。

今回はそのためしたものを忘れないための備忘録として残しておきます。

カウントダウン

まずはカウントダウン以下サイトのコードを参考に作ってみました。

https://commte.net/5082

コードはこちら

See the Pen Countdown by shin-beginner (@shin-beginner) on CodePen.

一つのHTMLコードに書くのなら以下のように書く。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Animesion Sample</title>
<style>
.type-countdown {
  position: relative;
  height: 100px;
  width: 100%
}
.type-countdown-list {
  counter-increment: number ;
  position: absolute;
  -webkit-animation: countdown 1s;
  margin: auto 0;
  width: 100%;
  opacity:0;
  font-size: 100px;
  text-align: center;
}
.type-countdown-list:before {
  content: counter(number);
}
.type-countdown-list:nth-child(3) { -webkit-animation-delay: 1s;}
.type-countdown-list:nth-child(2) { -webkit-animation-delay: 2s;}
.type-countdown-list:nth-child(1) { -webkit-animation-delay: 3s;}
@-webkit-keyframes countdown {
  50% {opacity:1;}
  100% {opacity:0;}
}
</style>
</head>
<body>
<div class="type-countdown">
  <div class="type-countdown-list"></div>
  <div class="type-countdown-list"></div>
  <div class="type-countdown-list"></div>
</div>
</body>
</html>

ローディングアニメーション

続いて、ローディングアニメーションです。

以下のサイトのコードをコピーして作成しました。

https://projects.lukehaas.me/css-loaders/

See the Pen Loding by shin-beginner (@shin-beginner) on CodePen.

一つのコードで書くなら。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Animesion Sample</title>
<style>
.loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #2470c2, 1.8em -1.8em 0 0em rgba(36,112,194, 0.2), 2.5em 0em 0 0em rgba(36,112,194, 0.2), 1.75em 1.75em 0 0em rgba(36,112,194, 0.2), 0em 2.5em 0 0em rgba(36,112,194, 0.2), -1.8em 1.8em 0 0em rgba(36,112,194, 0.2), -2.6em 0em 0 0em rgba(36,112,194, 0.5), -1.8em -1.8em 0 0em rgba(36,112,194, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.7), 1.8em -1.8em 0 0em #2470c2, 2.5em 0em 0 0em rgba(36,112,194, 0.2), 1.75em 1.75em 0 0em rgba(36,112,194, 0.2), 0em 2.5em 0 0em rgba(36,112,194, 0.2), -1.8em 1.8em 0 0em rgba(36,112,194, 0.2), -2.6em 0em 0 0em rgba(36,112,194, 0.2), -1.8em -1.8em 0 0em rgba(36,112,194, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.5), 1.8em -1.8em 0 0em rgba(36,112,194, 0.7), 2.5em 0em 0 0em #2470c2, 1.75em 1.75em 0 0em rgba(36,112,194, 0.2), 0em 2.5em 0 0em rgba(36,112,194, 0.2), -1.8em 1.8em 0 0em rgba(36,112,194, 0.2), -2.6em 0em 0 0em rgba(36,112,194, 0.2), -1.8em -1.8em 0 0em rgba(36,112,194, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.2), 1.8em -1.8em 0 0em rgba(36,112,194, 0.5), 2.5em 0em 0 0em rgba(36,112,194, 0.7), 1.75em 1.75em 0 0em #2470c2, 0em 2.5em 0 0em rgba(36,112,194, 0.2), -1.8em 1.8em 0 0em rgba(36,112,194, 0.2), -2.6em 0em 0 0em rgba(36,112,194, 0.2), -1.8em -1.8em 0 0em rgba(36,112,194, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.2), 1.8em -1.8em 0 0em rgba(36,112,194, 0.2), 2.5em 0em 0 0em rgba(36,112,194, 0.5), 1.75em 1.75em 0 0em rgba(36,112,194, 0.7), 0em 2.5em 0 0em #2470c2, -1.8em 1.8em 0 0em rgba(36,112,194, 0.2), -2.6em 0em 0 0em rgba(36,112,194, 0.2), -1.8em -1.8em 0 0em rgba(36,112,194, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.2), 1.8em -1.8em 0 0em rgba(36,112,194, 0.2), 2.5em 0em 0 0em rgba(36,112,194, 0.2), 1.75em 1.75em 0 0em rgba(36,112,194, 0.5), 0em 2.5em 0 0em rgba(36,112,194, 0.7), -1.8em 1.8em 0 0em #2470c2, -2.6em 0em 0 0em rgba(36,112,194, 0.2), -1.8em -1.8em 0 0em rgba(36,112,194, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.2), 1.8em -1.8em 0 0em rgba(36,112,194, 0.2), 2.5em 0em 0 0em rgba(36,112,194, 0.2), 1.75em 1.75em 0 0em rgba(36,112,194, 0.2), 0em 2.5em 0 0em rgba(36,112,194, 0.5), -1.8em 1.8em 0 0em rgba(36,112,194, 0.7), -2.6em 0em 0 0em #2470c2, -1.8em -1.8em 0 0em rgba(36,112,194, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.2), 1.8em -1.8em 0 0em rgba(36,112,194, 0.2), 2.5em 0em 0 0em rgba(36,112,194, 0.2), 1.75em 1.75em 0 0em rgba(36,112,194, 0.2), 0em 2.5em 0 0em rgba(36,112,194, 0.2), -1.8em 1.8em 0 0em rgba(36,112,194, 0.5), -2.6em 0em 0 0em rgba(36,112,194, 0.7), -1.8em -1.8em 0 0em #2470c2;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #2470c2, 1.8em -1.8em 0 0em rgba(36,112,194, 0.2), 2.5em 0em 0 0em rgba(36,112,194, 0.2), 1.75em 1.75em 0 0em rgba(36,112,194, 0.2), 0em 2.5em 0 0em rgba(36,112,194, 0.2), -1.8em 1.8em 0 0em rgba(36,112,194, 0.2), -2.6em 0em 0 0em rgba(36,112,194, 0.5), -1.8em -1.8em 0 0em rgba(36,112,194, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.7), 1.8em -1.8em 0 0em #2470c2, 2.5em 0em 0 0em rgba(36,112,194, 0.2), 1.75em 1.75em 0 0em rgba(36,112,194, 0.2), 0em 2.5em 0 0em rgba(36,112,194, 0.2), -1.8em 1.8em 0 0em rgba(36,112,194, 0.2), -2.6em 0em 0 0em rgba(36,112,194, 0.2), -1.8em -1.8em 0 0em rgba(36,112,194, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.5), 1.8em -1.8em 0 0em rgba(36,112,194, 0.7), 2.5em 0em 0 0em #2470c2, 1.75em 1.75em 0 0em rgba(36,112,194, 0.2), 0em 2.5em 0 0em rgba(36,112,194, 0.2), -1.8em 1.8em 0 0em rgba(36,112,194, 0.2), -2.6em 0em 0 0em rgba(36,112,194, 0.2), -1.8em -1.8em 0 0em rgba(36,112,194, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.2), 1.8em -1.8em 0 0em rgba(36,112,194, 0.5), 2.5em 0em 0 0em rgba(36,112,194, 0.7), 1.75em 1.75em 0 0em #2470c2, 0em 2.5em 0 0em rgba(36,112,194, 0.2), -1.8em 1.8em 0 0em rgba(36,112,194, 0.2), -2.6em 0em 0 0em rgba(36,112,194, 0.2), -1.8em -1.8em 0 0em rgba(36,112,194, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.2), 1.8em -1.8em 0 0em rgba(36,112,194, 0.2), 2.5em 0em 0 0em rgba(36,112,194, 0.5), 1.75em 1.75em 0 0em rgba(36,112,194, 0.7), 0em 2.5em 0 0em #2470c2, -1.8em 1.8em 0 0em rgba(36,112,194, 0.2), -2.6em 0em 0 0em rgba(36,112,194, 0.2), -1.8em -1.8em 0 0em rgba(36,112,194, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.2), 1.8em -1.8em 0 0em rgba(36,112,194, 0.2), 2.5em 0em 0 0em rgba(36,112,194, 0.2), 1.75em 1.75em 0 0em rgba(36,112,194, 0.5), 0em 2.5em 0 0em rgba(36,112,194, 0.7), -1.8em 1.8em 0 0em #2470c2, -2.6em 0em 0 0em rgba(36,112,194, 0.2), -1.8em -1.8em 0 0em rgba(36,112,194, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.2), 1.8em -1.8em 0 0em rgba(36,112,194, 0.2), 2.5em 0em 0 0em rgba(36,112,194, 0.2), 1.75em 1.75em 0 0em rgba(36,112,194, 0.2), 0em 2.5em 0 0em rgba(36,112,194, 0.5), -1.8em 1.8em 0 0em rgba(36,112,194, 0.7), -2.6em 0em 0 0em #2470c2, -1.8em -1.8em 0 0em rgba(36,112,194, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(36,112,194, 0.2), 1.8em -1.8em 0 0em rgba(36,112,194, 0.2), 2.5em 0em 0 0em rgba(36,112,194, 0.2), 1.75em 1.75em 0 0em rgba(36,112,194, 0.2), 0em 2.5em 0 0em rgba(36,112,194, 0.2), -1.8em 1.8em 0 0em rgba(36,112,194, 0.5), -2.6em 0em 0 0em rgba(36,112,194, 0.7), -1.8em -1.8em 0 0em #2470c2;
  }
}
</style>
</head>
<body>
<div class="loader">NowLoading...</div>
</body>
</html>

他にも逐次更新していく予定です。

本日は以上です。ありがとうございます。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

shin

30歳未経験からネットワークエンジニアに転職し、運用→構築→設計の仕事をやってます。色んな機器（Cisco、YAMAHA、Fortigate、PaloAlto）を触らせてもらいとても楽しい仕事です！

現在は派遣にて主にCiscoを中心としたネットワーク設計～構築をしております。

また、2023年より副業で個人事業主や小規模企業からのパソコン設定～ネットワーク作業の仕事を請け負っておりますので、もしお困りの方がいましたらお気軽にお問い合わせください。

●今までの作業履歴
- パソコンの新旧入れ替え
- 拠点間のインターネットVPN接続（YAMAHA-Fortigate）