css3で要素を常に回転させ続ける。

要素を回転させる為には

.target{
/* keyframes に任意の名前を付ける */
  -moz-animation-name: rot;
  -webkit-animation-name: rot;
  animation-name: rot;
  -goog-ms-animation-name: rot;

 /* 1動作(ここでは1回転)あたりの秒数 */
  -moz-animation-duration: 36s;
  -webkit-animation-duration: 36s;
  animation-duration: 36s;
  -goog-ms-animation-duration: 36s;

/* 動作の向き、初期値はnormal 、逆再生は alternate */
  -moz-animation-direction: normal;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -goog-ms-animation-direction: normal;

/* 動き方 linear, ease, easein, ease-out, ease-in-out */
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -goog-ms-animation-timing-function: linear;

/* 動作 (ここでは回転) の回数を数値で指定、無限ループは infinite */
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -goog-ms-animation-iteration-count: infinite;
}
@-webkit-keyframes rot{
  from {
  /* 最初の回転角 */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -goog-ms-transform: rotate(0deg);
  }
  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -goog-ms-transform: rotate(360deg);
  }
}
@keyframes rot{
  from {
  /* 最初の回転角 */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -goog-ms-transform: rotate(0deg);
  }
  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -goog-ms-transform: rotate(360deg);
  }
}

です。一応、IEだと動かないのですが、その他のブラウザでは36秒で一周してくれます。

参照をしたところを忘れてしまいました。。すいません。一応自分の制作の中で利用してそのコードをもってきました。

  • written on 2012.10.24
  • category : css

Next / Prev

前の記事:

次の記事:

Same Category

Page top↑