Web筋トレも使っているサーバー!ロリポップを使ってみない?

css3の勉強~その15~animation

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

コメントを残す

メールアドレスが公開されることはありません。