CSS - @keyframes

トップ > CSSリファレンス > @keyframes

概要

ルール名 @keyframes
構文
@keyframes name { ... }

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3105(-moz)
16
4(-webkit)
43
15(-webkit)
30
4(-webkit)
9

説明

animation プロパティによるアニメーションのフレームを定義します。nameanimation-name プロパティで指定するフレーム名を定義します。下記の例では、赤から青に変わるフレームを定義しています。アニメーションに関する概要は animation を参照してください。

CSS
@keyframes myframe {
  from {
    color: red;
  }
  to {
    color: blue;
  }
}

次の例では、最初(0%) 50×0px の赤、途中(50%) 50×50px の青、最後(100%) 100×50px の緑の矩形をアニメーションで描画するフレームを定義しています。from0%to100% と同じ意味を持ちます。

CSS
@keyframes myframe {
  from {
    width: 50px;
    height: 0px;
    background: red;
  }
  50% {
    width: 50px;
    height: 50px;
    background: blue;
  }
  to {
    width: 100px;
    height: 50px;
    background: green;
  }
}

使用例

CSS
@keyframes myframe {
  from {
    width: 50px;
    height: 0px;
    background: red;
  }
  50% {
    width: 50px;
    height: 50px;
    background: blue;
  }
  to {
    width: 100px;
    height: 50px;
    background: green;
  }
}
.test {
  animation: myframe 2s infinite both;
}
HTML
<div class="test"></div>
表示

関連項目

@keyframes, animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

リンク


Copyright (C) 2015 杜甫々
初版:2015年11月29日、最終更新:2015年11月29日
http://www.tohoho-web.com/css/rule/keyframes.htm