/* 回転 */

.spin_infinite {
/* keyframes に任意の名前を付ける */
  -moz-animation-name: 'rotate1';
  -webkit-animation-name: 'rotate1';
  animation-name: 'rotate1';
  -goog-ms-animation-name: 'rotate1'; 
 
 /* 1動作(ここでは1回転)あたりの秒数 */
  -moz-animation-duration: 20s;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -goog-ms-animation-duration: 20s;
 
/* 動作の向き、初期値は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 'rotate1' {
  from {
  /* 最初の回転角 */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    /*-ms-transform: rotate(0deg);*/
    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
    -goog-ms-transform: rotate(0deg);
  }
  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    /*-ms-transform: rotate(-360deg);*/
    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
    -goog-ms-transform: rotate(-360deg);
  }
}




/*別案*/

.load {
width: 540px;
height: 540px;
/*background: #1aa;*/
    -webkit-animation: spin 20.0s linear infinite;
    -moz-animation: spin 20.0s linear infinite;
    -ms-animation: spin 20.0s linear infinite;
    -o-animation: spin 20.0s linear infinite;
    animation: spin 20.0s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(-360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(-360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(-360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}