今までの記事にカテゴリをつけた。
タグとの違いがいまいち分からないけどsectionとchapterぐらいの認識
今まで見て見ぬふりをしてきたanimationを弄る(使う機会なかったしね。
/* ショートハンド */
/* 順番を変えると動かなくなる */
animation: 5s ease -2s infinite normal forwards running draw3;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay: -2s;
animation-iteration-count: infinite;
animation-direction:alternate;
animation-fill-mode: forwards;
animation-play-state: running;
animation-name: draw;
@keyframes draw {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}
参考: http://www.htmq.com/css3/animation-direction.shtml
: http://www.hcn.zaq.ne.jp/___/WEB/css-animations-ja.html
: http://unformedbuilding.com/articles/learn-about-css-animation/
animation-duration: 5s;
アニメーションを再生させる時間
animation-timing-function: ease;
アニメーションのタイミング・進行割合を指定する
linear: 一定の速度で再生
ease: 開始と完了を滑らかに。
ease-in: 開始のみ滑らかに
ease-out: 終了のみ滑らかに
ease-in-out: easeより素直に開始と完了を滑らかに
cubic-bezier(n, n, n, n): ベジェ曲線がなんとか、使わない
animation-delay: -2s;
アニメーションの開始時間を変更。
今回だとdirectionをnoneにして-7にすると同じタイミングで開始される。(一周する
animation-iteration-count: infinite;
アニメーションの再生回数
inifiniteだと無限に。
数値も指定可能。
animation-direction:alternate;
アニメーションを交互に再生させるか。
normal: アニメーション終了時に開始地点に戻る
alternate: アニメーション終了時に終了地点から開始地点へ再生する
animation-fill-mode: forwards;
アニメーション再生前後のスタイルを指定
none: アニメーション再生後、keyframes0%,100%の値を適用しない
forwards: アニメーション終了後、keyframes100%の値を適用
backwards: アニメーションが適用されたら(?)即座に0%の値を適用
both: forwardsとbackwardsを両方適用する。
animation-play-state: running;
アニメーションの一時停止の指定。
running: 通常通り再生
paused: 一時停止
animation-name: draw;
アニメーション名(@keyframes)の指定をする。