CSS - @keyframes

概要

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

説明

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

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

次の例では、最初(0%) ×ばつ0px の赤、途中(50%) ×ばつ50px の青、最後(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日
https://www.tohoho-web.com/css/rule/keyframes.htm

AltStyle によって変換されたページ (->オリジナル) /