Sponser Link
キーフレームを使った複雑なアニメーションを実現する
animationをchromeで使うにはベンダープレフィックスを使わなくてはいけない。
[html] <div></div>[/html] [css] div{
width:50px;
height:50px;
background:skyblue;
-webkit-animation-name:slidein;名前をつける
-webkit-animation-duration:1s;アニメーションの時間
-webkit-animation-timing-function:ease;開始と終了がゆっくり
-webkit-animation-delay:.1s;アニメーション開始までの時間
-webkit-animation-interation-count:infinite;永遠にリピートさせる
-webkit-animation-direction:.alternate;行ったり来たりになる
}
@-webkit-keyframes slidein {
0%{
margin-left:100%;
background:white;
}
70%{
margin-left:50%;
background:blue;
}
100%{
margin-left:0%;
}
}
[/css]
Sponser Link