WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス

@keyframes 「アニメーションの動き」

「@keyframes」は「animation」の動きを指定することができます。

CSS Ver.適用要素継承
3.0--
広告

@keyframesの指定方法

プロパティ/設定値意味
@keyframes [ルール名] {
[変化の割合] { 変化CSS }
}		 ルール名
CSSで使用できる文字でルールの名前を指定します。
ルール名は「animation」で使用されます。
経過時点のアニメーション状態を指定
n%n%経過したとき
from=0%（最初の状態）
to=100%（最後の状態）
ページTOP

@keyframes のサンプル


<style type="text/css">
.s1{
  animation : sample_s1 6s ease 0s infinite alternate;
  height : 50px;
  color  : #fff;
}
@keyframes sample_s1 {
  0%   { width:  50px; background: blue; }
  40%  { width: 100px; background: red;  }
  60%  { width: 200px; background: red;  }
  100% { width: 250px; background: green;}
}
.s2{
  animation : sample_s2 6s ease 0s infinite alternate;
  height : 50px;
  color  : #fff;
}
@keyframes sample_s2 {
  from { width:  50px; background: blue; }
  to   { width: 250px; background: green;}
}
</style>

<!-- html -->
<div class="s1">ABC</div>
<div class="s2">XYZ</div>
ABC
XYZ
ページTOP
関連するCSS(STYLE)
animationアニメーションの設定
animation-fill-modeアニメーションの再生前後のスタイル
animation-play-stateアニメーションの再生と一時停止
transitionトランジションの設定
transition-delayトランジションのディレイ
transition-durationトランジションの再生時間
transition-propertyトランジション対象のCSSプロパティ
transition-timing-functionトランジションの速度
transform要素の変形
transform-origin要素変形の起点
transform-style要素重なり時の３D表示
animation-delayアニメーションのディレイ
animation-directionアニメーションの方向
animation-durationアニメーションの再生時間
animation-iteration-countアニメーションの繰り返し
animation-nameアニメーションのキーフレーム名
animation-timing-functionアニメーション速度
広告