Keyframes
KeyframesはCSS3のanimationの動きを指定できる書式です。
@kyeframesの後ろにanimation-nameで指定されたアニメーションの名前を記述し、その内側にアニメーションの動きを指定します。
@keyframes anime-name {
/*アニメーションの動き*/
}
アニメーションの動きではanimation-durationなどで指定したアニメーションが実行されている時間が何%か経過したか際のCSSの状況を指定できます。たとえばanimation-durationが400msの場合、以下のように指定するとアニメーション開始時はwidthが0、100%つまり400ms経過した際に100pxの状態になります。
@keyframes anime-name {
0% {
width:0;
}
100%{
width:100px;
}
}
以下のように指定するとアニメーション開始時はwidthとheightが0、50%つまり200ms経過した際に100px、100%つまり400ms経過した際に0の状態に戻ります。
@keyframes anime-name {
0% {
width:0;
hegiht:0;
}
50%{
width:100px;
hegiht:100px;
}
100%{
width:0;
hegiht:0;
}
}
0%の際にはfromキーワード、100%の際にはtoキーワードで指定することも可能です。
@keyframes anime-name {
from {
width:0;
hegiht:0;
}
50%{
width:100px;
hegiht:100px;
}
to {
width:0;
hegiht:0;
}
}
一部のブラウザでは「-webkit-」やといったベンダープレフィックスを利用して実装されていたこともあるので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。IEではIE10よりベンダープレフィックスなしで実装されています。
@-webkit-keyframes anime-name {
0% {
width:0;
}
100%{
width:100px;
}
}
@keyframes anime-name {
0% {
width:0;
}
100%{
width:100px;
}
}
CSS3のanimationはAndroid端末での不具合が多いため利用する際には注意してください。(参考:@keyframesとAndroid – to-R)
対応ブラウザ
IE | Chrome 28 | Safari | Firefox 22 | iOS | Android |
---|---|---|---|---|---|
◯ 10〜 | △ | △ 5〜 | ◯ | △ 3.2〜 | △ 4〜 |
◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。
参考URL
登録日 : 2013年08月25日 最終更新日 : 2013年8月25日