CSS

【css】ロードアニメーション

コメントする

HTMLのロード完了まで白い画面（gifでも突っ込んでアニメーション）を表示ｰ>削除


$(window).load(function(){
//	$("#load").remove();
	$("#load").css('-webkit-animation', 'blow ease-in forwards 1s');
	$("#load").css('animation', 'blow ease-in forwards 1s');
});




#load {
	position: fixed;
	width: 100%;
	height: 100%;
	background: white;
	
	opacity: 1;
}
@-webkit-keyframes blow{
	100%{opacity: 0;}
}
@keyframes blow{
	100%{opacity: 0;}
}




<div id="load"></div>

【CSS】animation基礎

コメントする

今までの記事にカテゴリをつけた。
タグとの違いがいまいち分からないけど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)の指定をする。