SHU BLOG

  1. Twitter
  2. Instagram
  3. contact
NEW
お知らせ
NEW 2024.05.16　【CSS】グラデーション色々なパターンを解説！
お知らせ
NEW 2024.05.15　【WordPress】親カテゴリーの子カテゴリー一覧を表示する方法
お知らせ
2024.05.09　【レスポンシブデザイン】アニメーションが動かない原因

BLOG NEWS ブログ

  • ARTICLE
    2020.02.09
  • CATEGORY
TITLE

【CSS アニメーション】ホームページ制作に役立つサイトのご紹介

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです！

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
今回は、私もよく使用する
アニメーションサイト【WAIT! ANIMATE】のご紹介です！

アニメーションサイトを使うメリット

アニメーションサイト

メリット
  • 1ホームページの見せ方、表現の仕方が広がる
  • 2CSSを使用することで比較的に短いコードでできる
  • 3作業時間の軽減

今回のアニメーションサイト【WAIT! ANIMATE】のご紹介です！

<!--アニメーション毎にクラス名は変更してください-->
<div class="img_area">
<img src="icon001.png" class="animation01" alt="アイコン" />
</div>

1アニメーション01

アイコン
.animation01 {
  animation: animation01 6s ease infinite;
  transform-origin: 90% 35%;
}

@keyframes animation01 {
  0% { transform:rotate(-12deg) }
  6.95652% { transform:rotate(12deg) }
  8.69565% { transform:rotate(24deg) }
  15.65217% { transform:rotate(-24deg) }
  17.39131% { transform:rotate(-24deg) }
  24.34782% { transform:rotate(24deg) }
  26.08696% { transform:rotate(24deg) }
  33.04348% { transform:rotate(-24deg) }
  34.78261% { transform:rotate(-24deg) }
  41.73913% { transform:rotate(24deg) }
  43.47826% { transform:rotate(24deg) }
  50.43478% { transform:rotate(-24deg) }
  52.17391% { transform:rotate(-24deg) }
  59.13044% { transform:rotate(24deg) }
  65.21739% { transform:rotate(0deg) }
  100% { transform:rotate(0deg) }
}

2アニメーション02

アイコン
.animation02 {
  animation: animation02 6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes animation02 {
  0% { transform:rotate(-12deg) }
  5.16129% { transform:rotate(12deg) }
  6.45161% { transform:rotate(24deg) }
  11.6129% { transform:rotate(-24deg) }
  12.90323% { transform:rotate(-24deg) }
  18.06451% { transform:rotate(24deg) }
  19.35484% { transform:rotate(24deg) }
  24.51613% { transform:rotate(-24deg) }
  25.80645% { transform:rotate(-24deg) }
  30.96774% { transform:rotate(24deg) }
  32.25807% { transform:rotate(24deg) }
  37.41935% { transform:rotate(-24deg) }
  38.70968% { transform:rotate(-24deg) }
  43.87097% { transform:rotate(24deg) }
  48.3871% { transform:rotate(0deg) }
  100% { transform:rotate(0deg) }
}

3アニメーション03

アイコン
.animation03 {
  animation: animation03 6s ease infinite;
  transform-origin: 50% 0%;
}

@keyframes animation03 {
  0% { transform: rotate(-15deg) }
  1.66667% { transform: rotate(15deg) }
  3.33333% { transform: rotate(-18deg) }
  5% { transform: rotate(18deg) }
  6.66667% { transform: rotate(-22deg) }
  8.33333% { transform: rotate(22deg) }
  10% { transform: rotate(-18deg) }
  11.66667% { transform: rotate(18deg) }
  13.33333% { transform: rotate(-12deg) }
  15% { transform: rotate(12deg) }
  16.66667% { transform: rotate(0deg) }
  100% { transform: rotate(0deg) }
}

4アニメーション04

アイコン
.animation04 {
  animation: animation04 6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes animation04 {
  0% { transform:translate(0,-3px) }
  3.27869% { transform:translate(0,3px) }
  6.55738% { transform:translate(0,-3px) }
  9.83606% { transform:translate(0,3px) }
  13.11475% { transform:translate(0,-3px) }
  16.39344% { transform:translate(0,3px) }
  18.03279% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}

5アニメーション05

アイコン
.animation05 {
  animation: animation05 6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes animation05 {
  0% { transform:translate(0,0) }
  4.41177% { transform:translate(5px,0) }
  8.82353% { transform:translate(0,0) }
  13.23529% { transform:translate(5px,0) }
  17.64706% { transform:translate(0,0) }
  22.05882% { transform:translate(5px,0) }
  26.47059% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}

6アニメーション06

アイコン
.animation06 {
  animation: animation06 6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes animation06 {
  0% { opacity:1 }
  12.5% { opacity:0 }
  25% { opacity:1 }
  37.5% { opacity:0 }
  50% { opacity:1 }
  100% { opacity:1 }
}

7アニメーション07

アイコン
.animation07 {
  animation: animation07 6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes animation07 {
  0% { transform:translateY(0) }
  5.55556% { transform:translateY(0) }
  11.11111% { transform:translateY(0) }
  22.22222% { transform:translateY(-15px) }
  27.77778% { transform:translateY(0) }
  33.33333% { transform:translateY(-15px) }
  44.44444% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

8アニメーション08

アイコン
.animation08 {
  animation: animation08 6s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes animation08 {
  0% { transform:rotate(0deg) }
  42.85714% { transform:rotate(359deg) }
  100% { transform:rotate(359deg) }
}

9アニメーション09

アイコン
.animation09 {
  animation: animation09 6s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes animation09 {
  0% { transform: translateY(0) }
  25% { transform: translateY(-6px) }
  50% { transform: translateY(0) }
  100% { transform: translateY(0) }
}

10アニメーション10

アイコン
.animation10 {
  animation: animation10 4s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes animation10 {
  0% { transform: scale(1.1) }
  25% { transform: scale(0.8) }
  50% { transform: scale(1.1) }
  100% { transform: scale(1.1) }
}

11アニメーション11

アイコン
.animation11 {
  animation: animation11 6s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes animation11 {
  0% { transform: scale(1) }
  5.55556% { transform:scale(.9) rotate(-8deg) }
  11.11111% { transform:scale(.9) rotate(-8deg) }
  16.66667% { transform:scale(1.3) rotate(8deg) }
  22.22222% { transform:scale(1.3) rotate(-8deg) }
  27.77778% { transform:scale(1.3) rotate(8deg) }
  33.33333% { transform:scale(1.3) rotate(-8deg) }
  38.88889% { transform:scale(1.3) rotate(8deg) }
  44.44444% { transform:scale(1) rotate(0) }
  100% { transform:scale(1) rotate(0) }
}

12アニメーション12

アイコン
.animation12 {
  animation: animation12 4s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes animation12 {
  0% { transform:translateX(-50%); opacity:0 }
  25% { transform:translateX(0%); opacity:1 }
  50% { transform:translateX(50%); opacity:0 }
  100% { transform:translateX(50%); opacity:0 }
}

13アニメーション13

アイコン
.animation13 {
  animation: animation13 4s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes animation13 {
  0% { transform:translateX(50%); opacity:0 }
  25% { transform:translateX(0%); opacity:1 }
  50% { transform:translateX(-50%); opacity:0 }
  100% { transform:translateX(-50%); opacity:0 }
}

14アニメーション14

アイコン
.animation14 {
  animation: animation14 4s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes animation14 {
  0% { opacity:1 }
  49.9995% { transform:scale(1.8); opacity:0 }
  50% { transform:scale(1); opacity:1 }
  100% { transform:scale(1); opacity:1 }
}

まとめ

今回はこれで以上です。
最後まで読んでいただきありがとうございました。

アニメーションを導入することでホームページの見え方が少し変わってくるとおもいます
少しデメリットもあります。

デメリット
  • 1アニメーションサイトが閉鎖してしまうと使用できなくなる
  • 2アニメーションを多く使用すると逆に見えずらくなる恐れもある
  • 3CSSを理解せず使用すると応用に対応できなくなる

必ず、cssは1度入力をおこない動きの確認をしながら進めていきましょう。
今後もアニメーションサイトなどの紹介もしていきます！

【送料無料】 初心者からちゃんとしたプロになるWebデザイン基礎入門 / 栗谷幸助 【本】
created by Rinker
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです！笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

目次

最新記事

人気記事ランキング

オススメ記事

カテゴリー

月別アーカイブ

© 2023 shu-naka-blog

  • HOME
  • CONTACT
  • PAGE TOP

    • page_top