【web】CSSアニメーション

こんにちは、つちだにんじんです。
今回は、私なりのCSSででできるアニメーションアイディアをメモしていこうと思います。

私はjQueryやJavaScriptの使い手ではないので、極力HTMLとCSSのみでできるものをいつも模索しています。
悪く言えば怠惰、よく言えば猛者でしょうか・・・・
私の場合は前者です（反省）

でも、なるべくCSSでできる方が読み込みも早いので悪いことではないはずです！！！（開き直り）

点滅するアニメーション

まずは点滅するアニメーションです。

<!--- HTML -->
<div></div>

/* --- css --- */
div{
  width: 100px;
  height: 100px;
  background: red;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

こんな風になっています。
.redはdivに色をつけるためなので関係ないです。
.animationクラスで点滅のアニメーションをつけています。

・animation-name: blink;　→　@keyftamesで動きを指定するため、このアニメーションにblinkという名前をつけています。

・animation-iteration-count: infinite;　→　アニメーションの繰り返しを指定しています。infiniteは無限ループさせる値です。

・animation-duration: 2s;　→　アニメーション１回分がどのくらいの時間かけるかの指定です。

・animation-timing-function: ease-in-out;　→　アニメーションの進行の指定です。ease-in-outoは開始と終了をゆっくりにする値です。

回転するアニメーション

次は回転させるアニメーションです。

<!--- HTML -->
<div></div>

/* --- css ---*/
div{
  width: 100px;
  height: 100px;
  background: red;
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: liner;
  -webkit-animation: spin 3s linear infinite;
  -moz-animation: spin 3s linear infinite;
}
@keyframes spin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

似たような感じなので解説はしません。

ちなみに、animationプロパティは
animation: spin 3s linear infinite;
のように一行でまとめることもできます！

拡大・縮小アニメーション

次は大きさを変えるアニメーションです。

<!--- HTML -->
<div></div>

/* --- css ---*/
div{
  width: 100px;
  height: 100px;
  background: red;
  animation: size 3s ease-in-out infinite;
  -webkit-animation: size 3s ease-in-out infinite;
  -moz-animation: size 3s ease-in-out infinite;
}
@keyframes size{
  0% { transform: scale(0.5); }
  50% { transform: scale(1); }
  100% { transform: scale(0.5); }
}

※一行に短縮して書いています。

色を変えるアニメーション

次はだんだんと色が変わるアニメーションです。

<!--- HTML -->
<div></div>

/* --- css ---*/
div{
  width: 100px;
  height: 100px;
  animetion: iro 4s ease-in-out infinite;
  -webkit-animation: iro 4s ease-in-out infinite;
  -moz-animation: iro 4s ease-in-out infinite;
}
@keyframes iro{
  0% { background: red; }
  50% { background: blue; }
  100% { background: red; }
}

ふわふわするアニメーション

最後はふわふわ浮かんでいるようなアニメーションです。

<!--- HTML -->
<div></div>

/* --- css --- */
div{
  width: 100px;
  height: 100px;
  background: red;
  animation: huwa 3s ease-in-out infinite;
  -webkit-animation: huwa 3s ease-in-out infinite;
  -moz-animation: huwa 3s ease-in-out infinite;
}
@keyframes huwa{
  0%{ transform: translateY(10%); }
  50%{ transform: translateY(0); }
  100%{ transform: translateY(10%); }
}

SVGatorのの活用

簡単なアニメーションをいくつか書きましたが、複雑なアニメーションをつけたい！！ってことありますよね。
そんな時には、SVGatorをお勧めします！
SVGatorは直感的にSVGでのアニメーションを作成でき、コードでの書き出しもできるため読み込み速度にも考慮できます。
しかもweb上でのツールです！（インストール不要ですがユーザー登録は必要）
しかも無料です！（有料版もあり、無料だと機能制限があります）

過去にSVGatorについて書いた記事もありますので、興味のある方は参考にどうぞ。

SVGatorの回し者みたいになっていますが、違います（笑）
SVGatorユーザーが増えても私には何のフィードバックはありません（涙）

---

NINGEN×NINJIN | top

私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！