CSSアニメーションでアイコンを動かしてみよう

今回はCSSでアイコンを動かしてみようと思います。

アイコンを準備

この部分は、今回は特になんでもよかったので、イラストレーターで丸のアイコン(png)を作ってみました。

本当に適当ですみません。。。

作ったあとで気づきましたが、回転系が丸だとわからないですね。。。とほほ
ということで、四角も作りました(最初から四角だけでいいじゃんって言われてますね。きっと)。

とりあえず、これらのアイコンを動かしてみようと思います。

上下に動かす

動き出しは素早く動いて、戻りはゆっくりで作っています。

アイコンに以下の「upDown」クラスを付与するだけ

.upDown {
  margin-top: 100px;
  animation: upDown 4s infinite;
}

@keyframes upDown {
  0% { transform:translateY(0px); }
  25% { transform:translateY(-100px); }
  100% { transform:translateY(0px); }
}

4秒間で1サイクルとして、infiniteで無限に動くようにしています。
その4秒間のうちの25%で100px(つまり1秒で100px)動くようにしており残りの75%(つまり3秒)で戻ります。

左右に動かす

動き出しは素早く動いて、戻りはゆっくりで作っています。

css

アイコンに以下の「sideMove」クラスを付与するだけ

.sideMove {
margin-top: 100px;
animation: sideMove 4s infinite;
}

@keyframes sideMove {
   0% { transform:translateY(0px); }
   25% { transform:translateY(-100px); }
   100% { transform:translateY(0px); }
}

やっていることは上下と同じです。

回転

css

アイコンに以下の「rotation」クラスを付与するだけ

.rotation{
   margin-top: 10px;
   float: left;
   animation:3s linear infinite rotation;
}
@keyframes rotation{
   0%{ transform:rotate(0);}
   100%{ transform:rotate(360deg); }
}
.rotation2{
   margin-top: 10px;
   margin-left: 20px;
   float: left;
   animation:3s linear infinite rotation2;
}
@keyframes rotation2{
   0%{ transform:rotateX(0);}
   100%{ transform:rotateX(360deg); }
}
.rotation3{
   margin-top: 10px;
   margin-left: 20px;
   animation:3s linear infinite rotation3;
}
@keyframes rotation3{
   0%{ transform:rotateY(0);}
   100%{ transform:rotateY(360deg); }
}
.rotation4{
   margin-top: 10px;
   margin-left: 20px;
   float: left;
   animation:3s ease-in-out infinite alternate rotation4;
}
@keyframes rotation4{
   0%{ transform:rotate(0);}
   100%{ transform:rotate(360deg); }
}

特殊な動き！揺れるとか

左２つはマウスオーバーで動くようにしてます。

css

アイコンに以下の「swing」クラスを付与するだけ

.swing {
   margin-top: 10px;
   float: left;
}
.swing:hover {
   animation-name: swing;
   animation-duration: 2s;
   animation-delay: .45s;
}
@-webkit-keyframes swing {
   0%,100% {
     -webkit-transform-origin: top center;
   }
   10% { -webkit-transform: rotate(-15deg); }
   20% { -webkit-transform: rotate(10deg); }
   30% { -webkit-transform: rotate(-5deg); }
   40% { -webkit-transform: rotate(5deg); }
   50% { -webkit-transform: rotate(-3deg); }
   60% { -webkit-transform: rotate(2deg); }
   70% { -webkit-transform: rotate(-2deg); }
   80% { -webkit-transform: rotate(1deg); }
   90% { -webkit-transform: rotate(-1deg); }
   100% { -webkit-transform: rotate(0deg); }
}
.swing2 {
   margin-top: 10px;
   margin-left: 20px;
   float: left;
}
.swing2:hover {
   animation-name: swing2;
   animation-duration: 1s;
   animation-delay: .3s;
}
@-webkit-keyframes swing2 {
   10% { -webkit-transform: rotate(-10deg); }
   20% { -webkit-transform: rotate(8deg); }
   30% { -webkit-transform: rotate(-5deg); }
   40% { -webkit-transform: rotate(4deg); }
   50% { -webkit-transform: rotate(-3deg); }
   60% { -webkit-transform: rotate(2deg); }
   70% { -webkit-transform: rotate(-1deg); }
   80% { -webkit-transform: rotate(1deg); }
   90% { -webkit-transform: rotate(-1deg); }
   100% { -webkit-transform: rotate(0deg); }
}

.swing3 {
   margin-top: 10px;
   margin-left: 20px;
   animation-name: swing3;
   animation-duration: 2s;
   animation-delay: 1s;
   animation-iteration-count: infinite;
}
@-webkit-keyframes swing3 {
   0% { -webkit-transform: rotate(0deg); }
   55% { -webkit-transform: rotate(0deg); }
   60% { -webkit-transform: rotate(-10deg); }
   65% { -webkit-transform: rotate(8deg); }
   70% { -webkit-transform: rotate(-5deg); }
   75% { -webkit-transform: rotate(4deg); }
   80% { -webkit-transform: rotate(-3deg); }
   85% { -webkit-transform: rotate(2deg); }
   90% { -webkit-transform: rotate(-1deg); }
   95% { -webkit-transform: rotate(1deg); }
   100% { -webkit-transform: rotate(0deg); }
}

マウスオーバーで文字色を変更する

マウスオーバーで色が変わるよ

css

文字のタグに以下の「hoverChange」クラスを付与するだけ

.hoverChange {
color: red;
transition: 1.0s;
}

.hoverChange:hover {
color: blue;
}

クリックで文字色を変更する

やりたいことは↑でやったことのクリックバージョン。
さて、ここで問題が一つ。
↑では:hoverでイベントを拾えますが、これのクリックバージョンがありません。
jQueryを使えば簡単にできますが、ここではあくまでCSSでできないかを考えてみます。

で、こうなります。

クリックで色が変わるよ

チェックボックスとして作成してみたら、このような動作は可能でした。
チェックボックスとして作成しているので、使える場面は限られてしまいますが、毎回jqueryとかを作るってのも嫌なので知っていると活用できる場面はありそうですね。。

html

<input type=”checkbox” id=”clickChange”>
<label for=”clickChange” class=”clickChange2″>クリックで色が変わるよ</label>

css

#clickChange {
   display: none;
}
#clickChange+.clickChange2{
   color: red;
   cursor: pointer;
}
#clickChange:checked+.clickChange2{
   color: blue !important;
}

マウスオーバーで少し大きく

css

absoluteにしておかないと、大きくなった際に、他の場所も動いてしまうので注意

.hoverUp {
   width: 63px;
   height: 63px;
   transition: 0.5s;
   position: absolute;
}
.hoverUp:hover {
   width: 67px;
   height: 67px;
}

点滅

css

.flashing{
   -webkit-animation:flash 2.0s ease-in-out infinite alternate;
   -moz-animation:flash 2.0s ease-in-out infinite alternate;
   animation:flash 2.0s ease-in-out infinite alternate;
}
@-webkit-keyframes flash{
   0% {opacity:0;}
   100% {opacity:1;}
}
@-moz-keyframes flash{
   0% {opacity:0;}
   100% {opacity:1;}
}
@keyframes flash{
   0% {opacity:0;}
   100% {opacity:1;}
}

animationのオプション

動きに変化をつけれます。

ease

開始と完了を滑らかにする
デフォルトはこれになっている

linear

一定

ease-in

始めがゆっくり

ease-out

終わりがゆっくり

ease-in-out

始めと終わりがゆっくり

おしゃれなアニメーション

おしゃれなアニメーションをしたい時は、このサイトがすごく参考になります。
https://ics.media/entry/15130/