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

code coder coding computer 実践してみた
Photo by Pixabay on Pexels.com
2020.12.27

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

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

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

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

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

カウントダウン

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

ここまで動かせる！楽しいcss アニメーションのサンプル集 - コムテブログ
commte.net

コードはこちら

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>

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

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

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

Single Element CSS Spinners
A collection of loading spinners animated with CSS. Each spinner is created from a single div with animation, styling an...
projects.lukehaas.me

 

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をコピーしました