CSS - @keyframes

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

概要

ルール名	@keyframes
構文	@keyframes name { ... }
サポート	https://caniuse.com/?search=%40keyframes

説明

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

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

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

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

使用例

@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;
}

<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

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/%40keyframes
• https://w3c.github.io/csswg-drafts/css-animations-1/#keyframes

---