css3のanimationのヤツ
CSS3のアニメーションやってみた
webkitで
@-webkit-keyframes animation00 {
from {-webkit-transform:scale(1,1) rotate(0deg);}
50% {-webkit-transform:scale(2,2) rotate(180deg);}
to {-webkit-transform:scale(1,1) rotate(360deg);}
}
div#back {
-webkit-animation:animation00 5s linear 0 100 normal none;
}
from {-webkit-transform:scale(1,1) rotate(0deg);}
50% {-webkit-transform:scale(2,2) rotate(180deg);}
to {-webkit-transform:scale(1,1) rotate(360deg);}
}
div#back {
-webkit-animation:animation00 5s linear 0 100 normal none;
}
書き方
@-webkit-keyframes キーフレームの名前 {
from { /*スタート 初期値 アニメーションさせたいやつ*/ }
25% { /*アニメーションさせたいやつ*/ }
50% { /*アニメーションさせたいやつ*/ }
75% { /*アニメーションさせたいやつ*/ }
to { /*最後 アニメーションさせたいやつ んでfromに戻る*/ }
}
div {
-webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
}
/*
name : キーフレーム名
duration : 1アニメーションの時間（1秒なら 1s 0.5秒なら 0.5s）
timing-function : linearとかeaseとかそんなの
delay : 遅延時間（1秒なら 1s 0.5秒なら 0.5s）
iteration-count : アニメートする回数
direction : https://developer.mozilla.org/ja/CSS/animation-direction
fill-mode : http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
*/
from { /*スタート 初期値 アニメーションさせたいやつ*/ }
25% { /*アニメーションさせたいやつ*/ }
50% { /*アニメーションさせたいやつ*/ }
75% { /*アニメーションさせたいやつ*/ }
to { /*最後 アニメーションさせたいやつ んでfromに戻る*/ }
}
div {
-webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
}
/*
name : キーフレーム名
duration : 1アニメーションの時間（1秒なら 1s 0.5秒なら 0.5s）
timing-function : linearとかeaseとかそんなの
delay : 遅延時間（1秒なら 1s 0.5秒なら 0.5s）
iteration-count : アニメートする回数
direction : https://developer.mozilla.org/ja/CSS/animation-direction
fill-mode : http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
*/
はい