Hoạt hình Spin CSS3

Tôi đã xem xét khá nhiều bản demo và không biết tại sao tôi không thể sử dụng spin CSS3. Tôi đang sử dụng bản phát hành ổn định mới nhất của Chrome.

Câu đố: http://jsfiddle.net/9Ryvs/1/

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}

<div></div>

Để sử dụng CSS3 Animation, bạn cũng phải xác định các khung hình chính hoạt hình thực tế ( mà bạn đặt tênspin )

Đọc https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations để biết thêm

Khi bạn đã định cấu hình thời gian của hình động, bạn cần xác định diện mạo của hình động. Điều này được thực hiện bằng cách thiết lập hai hoặc nhiều khung hình chính bằng cách sử dụng @keyframesquy tắc. Mỗi khung hình chính mô tả cách phần tử hoạt hình sẽ hiển thị tại một thời điểm nhất định trong chuỗi hoạt ảnh.

Bản demo tại http://jsfiddle.net/gaby/9Ryvs/7/

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

Bạn chưa chỉ định bất kỳ khung hình chính nào. Tôi đã làm cho nó hoạt động ở đây .

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

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

Bạn thực sự có thể làm nhiều thứ thực sự tuyệt vời với điều này. Đây là một cái tôi đã làm trước đó .

:)

NB Bạn có thể bỏ qua việc phải viết ra tất cả các tiền tố nếu bạn sử dụng -prefix miễn phí .

Kể từ Chrome / FF mới nhất và trên IE11, không cần tiền tố -ms / -moz / -webkit. Đây là một mã ngắn hơn (dựa trên các câu trả lời trước):

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Bản trình diễn trực tiếp: http://jsfiddle.net/9Ryvs/3057/

HTML với glyphicon phông chữ tuyệt vời.

<span class="fa fa-spinner spin"></span>

CSS

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

.spin {
    animation: spin 1000ms linear infinite;
}

Câu trả lời duy nhất đưa ra chính xác 359deg:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

Đây là một gradient hữu ích để bạn có thể chứng minh nó đang quay (nếu đó là một vòng tròn):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

Để xoay, bạn có thể sử dụng các khung chính và một biến đổi.

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

Thí dụ

Để hoàn thành, đây là một ví dụ Sass / La bàn thực sự rút ngắn mã, CSS được biên dịch sẽ bao gồm các tiền tố cần thiết, v.v.

div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))

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

điều này sẽ khiến bạn trả lời câu hỏi