第８日目

こんばんは！！あゆむです！
あゆむという名前は、ホストの時の源氏名です。
いや、過去の栄光引きずってる訳ではなくて、ネットの名前としてずっと使ってるんです。
昔からの友人も「歩夢」って呼ぶし、あだ名みたいな感じですね。
社交不安障害なのにナンバー入りもしてたので、何事にもその根性を活かして行きたいですね。

さて、そんな事はどうでもいいんです。始めます。
〜今日やった事〜
・Apple公式の模写
・@keyframesの学習
https://github.com/EldaMerker/JSpractice/tree/master/practice/keyframe

お初に見る@keyframesですが、なんか面白そうな動きないかな〜
と思い調べてたところ遭遇。コピペして貼っただけなんですが、

「何このすごいの、、（困惑）」

やっぱりWeb上でなんか動いてるのって見るだけで楽しいんですよね
（語彙力がないよね！）

という事で、今日は@keyframesについて理解を深めたいと思います。

〜とりあえず〜
animationプロパティと@keyframesを使うとcssのみでアニメーションの設定ができる。

〜書き方〜
＠で始まり波括弧内に記述。「;」はいらない。
@keyframesの後にanimation名

@keyframes sizeScale {
0% {
width:200px;
}
100% {
width:300px;
}
}
//０％は開始時。100%は終了時。（100%のみの記述もOK）

で、コピペしたのを見るとanimationはmoveで指定して
inline-blockで横にしてanimationをinfiniteで無限ループにして
animation-delayで子要素のanimationがいつ始まるかを指定してるんですね。
なんとなくわかったような気がします！（気のせいかも！）

ease-in-outってなんだか難しいのでもっと調べます。
明日わかる人に聞いて見解があってるか等確かめて、自分でオリジナルを作ってみたいと思います。

javascriptと平行して覚えていきたいですね。

さて、今日のラモーンズです！

なんで上手に演奏しなくちゃいけないんだよ。

俺たちはパンクなんだ。音楽やってるんじゃねえんだよ。

上手くなるまで待ってたらジジイになっちまうよ！

- ジョーイ・ラモーン/RAMONES　-