忘れてしまう。
使い所
:hoverでアニメーションを付けるのはよくある。
transitionで時間指定ができるのでいい感じのが作れる。
div{
width:0px;
transition: all 0.5s liner;
}
div:hover{
width:100px;
transition: all 0.2s ease;
}transitionをそれぞれに振れば動作時間とかをそれぞれに指定できる。
でもこれは:hoverに関わる動作でしかないので、何もしなくても動き続けるやつを作りたい時には向かないし、スタートとゴールしか指定できないので寄り道的な動作も付けられない。
そんな感じで、animationが活躍する場合は多い。
個人的テンプレ
「無限ループ+繰り返す毎にディレイ」をよくやる。
div{
animation: 2s linear infinite widthMove;
}
@keyframes widthMove{
0%{ width: 0px;}
15%{ width: 100px;}
50%{ width: 0px;}
100%{ width: 0px;}
}こんなかんじになる。
繰り返し毎のディレイを作りたい場合、animation群に指定するプロパティはないので、keyframes内でディレイを設定する必要がある。上記だと0～50％の間は動いて、50～100％の間は動かない。animationで動作時間は2秒にしてるから1秒ずつ動いて止まってを繰り返す。
個人的テンプレ2
.scroll{
height: 200px;
position: absolute;
left: 20vw;
bottom: 0;
}
.scroll::before,
.scroll::after{
content: "";
width: 1px;
display: block;
position: absolute;
left: 0;
top: 0;
}
.scroll::before{
height: 100%;
background: #fff;
}
.scroll::after{
height: 0%;
background: #666;
animation: 4s linear infinite TopScroll;
}
@keyframes TopScroll{
0%{ height: 0%;}
25%{ height: 100%;}
50%{ height: 100%; top: auto; bottom: 0;}
75%{ height: 0%;}
100%{ height: 0%; top: 0; bottom: auto;}
}画面いっぱいに表示したファーストビューでスクロールを促すやつの装飾。矢印が動くのと、バーがなんか動いてる感じのやつの2パターンをよく見る、その後者。
ベースになる背景色がいらないなら::afterだけ使えばいい。
「animation:;」を使う
animationは指定項目が多い。ざっとこんな感じ。
animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;一々書いていると非常にだるいんで、backgroundよろしくanimationでまとめて書くことができる。
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation: 5s liner 0s infinite normal none running;指定しない部分は飛ばしちゃって大丈夫。順番を入れ替えても動く臭いけど、秒指定が複数あるとかで混乱するとまずいんで、並びを覚えてそれに準じたほうがいいと思う。
animationのON/OFF
こうするとanimationを無効化できる。
animation:none;で、こうしたとする。
div{
animation: 5s liner infinitie keyframesName;
}
div:hover{
animation: none;
}この場合の動作は、:hover時はanimationが無効化されて初期値に戻って、:hoverじゃなくなればまた最初からanimation通りに動く。
@keyframesについて
@で始まってるから分かる通り、@の中に@は書けない。
だから@media screenでレスポンシブデザインを作るとして、スマホだったら動作を変えたいってなった場合、@media screen内で既存の@keyframesは調整できないんで、PC・スマホでそれぞれの@keyframesを予め用意しておいて@madhia screen内のanimationで読み込み先を切り替えるようにする。
そのルールさえ守れば＠はどこにでも掛けちゃうんで、cssファイル内に点在してると修正する時めっちゃめんどくさい気がする。animationの近くに都度@keyframesを書くか、@keyframesだけまとめたcssファイルを用意するか、どっちがいいんでしょうね。
コメント