146

Tôi muốn thực hiện một vòng quay biểu tượng tải của mình bằng CSS.

Tôi có một biểu tượng và mã sau đây:

<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>

Nhưng nó không hoạt động. Làm thế nào biểu tượng có thể được xoay bằng CSS?

css animation webkit

— Alexander Ruliov
nguồn

3

giải pháp thành lập - jsfiddle.net/LwwfG trả lời xin vui lòng, để đóng câu hỏi.

— Alexander Ruliov

3

Bạn có thể thêm câu trả lời của riêng bạn. Trong đó, bao gồm mã từ bên trong bản demo jsFiddle của bạn.

— ba mươi

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>

Mở rộng đoạn trích

— Kirk Strobeck
nguồn

12

một câu hỏi, -moz-và -ms-tiền tố cần thiết theo -webkit-keyframes? vì chỉ có webkit mới đọc nên -webkit-keyframestôi tin rằng việc gỡ bỏ chúng là an toàn.

— Bor691

2

Tôi có đúng không khi hiểu điều này không hoàn hảo về mặt lý thuyết vì các thuộc tính không có tiền tố của nhà cung cấp phải luôn tồn tại để không ghi đè hành vi tuân thủ tiêu chuẩn? Xem: css-tricks.com/ordering-css3-properations

Mát mẻ. Đã kiểm tra trước khi chỉnh sửa. Không chắc chắn 100%.

@Ricky - Mẹo: Khi bạn đã thảo luận về chỉnh sửa với tác giả (như trên), không nên đề cập đến điều đó trong "chỉnh sửa nhận xét". Vì vậy, bản chỉnh sửa không bị từ chối là "thay đổi căn bản" ;-)

— Leigh

1

Nếu bạn đang sử dụng PostCSS, hãy cân nhắc sử dụng autoprefixer để xử lý tất cả các sự cố trình duyệt chéo khi chỉ sử dụng transform.

— Michał Pietraszko

88

Làm việc tốt

#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>

Mở rộng đoạn trích

— Alexander Ruliov
nguồn

Có bất kỳ giải pháp css crossbrowser có sẵn?

— andrej

13

Hoạt hình xoay vô hạn trong 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>

Mở rộng đoạn trích

MDN - Hoạt hình CSS trên web

— Roko C. Buljan
nguồn

6

Không có bất kỳ tiền tố nào, ví dụ như đơn giản nhất:

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

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

— Dorian
nguồn

5

Hoạt động trong tất cả các trình duyệt hiện đại

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

— Kareem
nguồn

2

Xoay trên add class .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);
       }
     }

— TIẾNG VIỆT
nguồn

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>

— pradip kor
nguồn

1

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

div{
   animation: rotate 4s linear infinite;
}

— vinkal
nguồn

3

Xin chào, chào mừng bạn đến với Stack Overflow! Khi bạn trả lời một câu hỏi, bạn nên bao gồm một số loại giải thích, như những gì tác giả đã làm sai và những gì bạn đã làm để sửa nó. Tôi nói với bạn điều này bởi vì câu trả lời của bạn đã được gắn cờ là chất lượng thấp và hiện đang được xem xét. Bạn có thể chỉnh sửa câu trả lời của mình bằng cách nhấp vào nút "Chỉnh sửa".

— Federico Grandi

CSS hoạt hình xoay vô tận

Hoạt hình xoay vô hạn trong CSS