こんにちは。

 

とうとう雪が積もりましたね。

僕は車庫を持ってないので車は外に置きっぱなしです。

 

なので朝出掛ける前に車の雪を落としてから出勤しなくてはいけないのですが。。。

 

車の雪落とすアレが車に乗せてたと思ってたのですが見つかりません(; ･`д･´)

夏には乗っているの確認したのですが、いつの間にか家出されたみたいですね( ;∀;)

 

新しいの買わなくては

 

 

 

 

佐藤です。

 

今日はCSSアニメーションについて、以外と引っかかりやすい繰り返し時のdurationについて書いていきます。

 

CSSのanimationで繰り返し設定をする時に、「繰り返しに間隔を1秒とりたい」とかってあると思います。

そんなときにぱっと思い浮かびやすいのはdurationだと思います。

 

まずCSSのanimationにおけるdurationについて

durationで指定した値の分だけanimationの開始を遅らせます。

 

 

ただこちら、animationの自体を繰り返しも含めて丸々遅らせるのでアニメーションに繰り返しの設定をしても、開始が遅れるのは見た目上最初の一回のみとなります。
※だからこそかなり便利だったりもします。

 

 

繰り返し毎に間を空けたい場合はanimationに使う@keyframeに命令を加えていきます。

keyframeの中のポイント指定は秒じゃなくて%だしそこに命令を加えると計算がややこしくて敷居が高い！ってイメージがあるかもしれませんが、とても簡単に設定できます。

 

例として海老フライに走ってもらいましょう。

まずは普通に繰り返してもらいます。この子にはクラス属性で”ebi-1gou”と与えています。

 

 

.ebi-1gou{
  animation: ebi-1gou-move 2s ease-in-out 0s infinite normal;
}
@keyframes ebi-1gou-move{
  0%{
    left: 0;
  }
  100%{
    left:calc(100% + 83px);
  }
}

 

次にアニメーション毎にdurationを再現していきます。

まず、.ebi-1gouのanimationに間をとりたい時間分、アニメーション時間を足します

 

.ebi-1gou{
  animation: ebi-1gou-move 3s ease-in-out 0s infinite normal;
}

今回は1秒足してアニメーション時間を２s→３sに変更しました。

 

アニメーション全体の時間に対して止まる時間の割合を計算します。
まぁ単純に”止める時間÷アニメーション時間×100″すればOKです。端数の扱いはお好みで。

なので今回は”1÷3×100″で約33です。

 

次にkeyflamesの”0%”を中身ごとコピペしてすぐしたに貼り付け、”0%”の値を先ほどに値に修正します。

 

@keyframes ebi-1gou-move{
  0%{
    left: 0;
  }
  33%{
    left: 0;
  }
  100%{
    left:calc(100% + 83px);
  }
}

では実際にみてみましょう。

 

 

ちゃんと止まってますね。

 

これだけでアニメーション毎のdurationが再現できちゃいました。とっても簡単ですよね。

 

実はこんな感じでkeyframesは以外と簡単に調整ができますので今回のをちょっと応用すればいろいろな動きもできちゃいますよー。