animationで出てくる alternateって？
CSS3のamimationを使うと、色を変えたり位置を変えたりといった、アニメーションをつけることができます。
animationには、次の6つのプロパティーがあります。
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
“alternate"は、6.の"animation-direction"で指定できます。 初期値は normal。
そんなら、alternateって？
奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す
HTMLクイックリファレンス - animation-direction より
という意味だそうです。
div.sample { animation: anime1 3s ease -2s infinite alternate; }
というのは、
anime1の動きを
3秒間で
開始と終わりをなめらかにして
2秒前から開始して
いったりきたり繰り返す
ってことでしょうか。
もともとの"alternate"の意味は?
交互の、かわるがわるの、一つおきの、互い違いの、(茎に対して)互生の
Weblio - alternate より
って意味らしいので、納得！
alternativeっていうとこのパーカーを持ってて、"alternate"を見たときに、そっちを先に連想しちゃいました。
着やすくてあったかいので、色違いで2枚も… はい。どうでもいいですね。
その、"alternative"の意味は、
(二つのうち)どちらかを選ぶべき、二者択一の、代わりとなる、代わりの、慣習的方法をとらない、新しい
Weblio - alternate より
ってことらしい。こっちは、新しいスタイルってことなのかな?
おまけ
「animation-iteration-count」で設定している、”infinite"。 よく聞く言葉ありますよね？
そう、infinite loop!!! 無限ループ！！
animationのsampleコードはこちら
See the Pen Alternate by kurokoroll (@kurokoro) on CodePen.
以上！！
Bye〜