146

CSS로 로딩 아이콘을 회전시키고 싶습니다.

아이콘과 다음 코드가 있습니다.

<style>
#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>

그러나 작동하지 않습니다. CSS를 사용하여 아이콘을 어떻게 회전시킬 수 있습니까?

css animation webkit

— 알렉산더 룰 로프
소스

3

설립 된 솔루션 — jsfiddle.net/LwwfG가 질문을 마무리하기 위해 대답하십시오.

— Alexander Ruliov 2016 년

3

당신은 당신의 자신의 답변을 추가 할 수 있습니다. 여기에 jsFiddle 데모 내부의 코드를 포함하십시오.

— thirtydot

263

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

<div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div>

스 니펫 확장

— 커크 스트로 벡
소스

12

하나 개의 질문입니다 -moz-및 -ms-접두사 필요에 따라 -webkit-keyframes? 웹킷 만 읽을 것이므로 -webkit-keyframes제거하는 것이 안전하다고 생각합니다.

— Bor691

2

공급 업체 접두사가 아닌 속성이 항상 표준 준수 동작을 무시하지 않도록 최후에 유지되어야하기 때문에 이것이 이론적으로 완벽하지 않다는 것을 이해하는 것이 맞습니까? 참조 : css-tricks.com/ordering-css3-properties

멋있는. 편집하기 전에 확인 중입니다. 100 % 확실하지 않았습니다.

@Ricky-팁 : 위와 같이 저자와 편집에 대해 이미 논의한 경우 "주석 편집"에서 언급하는 것은 좋지 않습니다. 따라서 편집은 "급진적 변경"으로 거부되지 않습니다 ;-)

— Leigh

1

PostCSS를 사용하는 경우을 사용하는 경우 autoprefixer를 사용하여 모든 크로스 브라우저 문제를 처리하십시오 transform.

— Michał Pietraszko

88

잘 작동 :

#test {
    width: 11px;
    height: 14px;
    background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
}

<div id='test' class='rotating'></div>

스 니펫 확장

— 알렉산더 룰 로프
소스

크로스 브라우저 CSS 솔루션이 있습니까?

— andrej

13

CSS의 무한 회전 애니메이션

/* ENDLESS ROTATE */
.rotate{
  animation: rotate 1.5s linear infinite; 
}
@keyframes rotate{
  to{ transform: rotate(360deg); }
}


/* SPINNER JUST FOR DEMO */
.spinner{
  display:inline-block; width: 50px; height: 50px;
  border-radius: 50%;
  box-shadow: inset -2px 0 0 2px #0bf;
}

<span class="spinner rotate"></span>

스 니펫 확장

MDN-웹 CSS 애니메이션

— 로코시 불얀
소스

6

접두사가 없으면 (예 : 가장 단순함)

.loading-spinner {
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

— 도리스 사람
소스

5

모든 최신 브라우저에서 작동

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}

— 카림
소스

1

<style>
div
{  
     height:200px;
     width:200px;
     -webkit-animation: spin 2s infinite linear;    
}
@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

</style>
</head>

<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>

— 프라 디프 코
소스

1

클래스 .active 추가시 회전

  .myClassName.active {
                -webkit-animation: spin 4s linear infinite;
                -moz-animation: spin 4s linear infinite;
                animation: spin 4s linear infinite;
              }



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

— DINESH 아디 카리
소스

1

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}

— 빈칼
소스

3

안녕하세요, Stack Overflow에 오신 것을 환영합니다! 질문에 대답 할 때 저자가 잘못한 것과 수정 한 것과 같은 일종의 설명을 포함해야합니다. 귀하의 답변이 품질이 낮은 것으로 표시되어 현재 검토 중이므로이 정보를 알려드립니다. "편집"버튼을 클릭하여 답변을 편집 할 수 있습니다 .

— Federico Grandi

CSS 끝없는 회전 애니메이션

CSS의 무한 회전 애니메이션