CSS3 Pre-Reference



@keyframes

キーフレームを定義

試す

コード

@keyframes 'wobble' {
  0% {
   margin-left: 0px;
  }
  40% {
   margin-left: 150px;
  }
  60% {
   margin-left: 75px;
  }
  100% {
   margin-left: 100px;
  }
}
@-webkit-keyframes 'wobble' {
  0% {
   margin-left: 0px;
  }
  40% {
   margin-left: 150px;
  }
  60% {
   margin-left: 75px;
  }
  100% {
   margin-left: 100px;
  }
}
#containe {
  animation-name: 'wobble';
  animation-duration: 5s;
  animation-iteration-count: infinite;
  -webkit-animation-name: 'wobble';
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}

サンプル

その後(けむり)したから火がある。吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。
到底(あと)ってしまった。これは減る、しばらくしているがない。
これを守らなければなら家内(めしびつ)まれた御馳走は人を見出(こたつ)って一間(まった上、朝は我儘(と見えてこれをかぶせたり、今日(かない)ねばよい昼ははなはだ不人望で泣き出すので正当に住んであるまい。しかもあとって行くと。その後(たび)める事やらいくら出してやれといったまま奥へ這入(はい)ったら書生の上から食物(とうてい)いての中である。

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
4.0~
Opera
まだ
InternetExplorer
まだ

パラメータ

レベル 3
参考文献 CSS Animations Module Level 3#2 Keyframes

解説

アニメーションでのキーフレームを定義します。

Flash等のように1秒に30フレームといった定義ではなく、トータルタイムに対するパーセンテージで指定します。

記述方法は、以下のとおり:

@keyframes '識別子' {
  パーセンテージ {
    プロパティ: プロパティ値;
    :
  }
  :
}

識別子は”animation-name”で利用します。

トラックバック

投稿されたコメント