Thực hiện xoay vòng xoay động CSS3 này chỉ xoay một lần

Question

Tôi đang cố tạo hiệu ứng biểu đồ hình tròn xoay từ 0 độ đến bất kỳ mức độ nào tôi muốn nó kết thúc (cho phép nói 300 độ, không quan trọng). Có một vòng tròn cơ bản với một vòng tròn quay đầu. Vì nó đứng ngay bây giờ, biểu đồ hình tròn xoay 360 độ đầy đủ trước khi kết thúc với vị trí mức cuối cùng (300 trong trường hợp này). Ngay bây giờ nó chỉ hoạt động trong Chrome.

JSFiddle

HTML của tôi:

<div class="spinner"> 
    <span><em></em></span> 
    <span><em></em></span> 
</div> 

CSS của tôi:

.spinner { 
    width: 250px; 
    height: 250px; 
    background: #aaa; 
    margin: 0 auto; 
    position: relative; 
} 
.spinner:after { 
    position: absolute; 
    content: ""; 
    width: 0%; 
    height: 0%; 
    border-radius: 100%; 
    background: #fff; 
    top: 10%; 
    left: 10%; 
} 
.spinner span em { 
    background: #0e728e; 
    -webkit-animation-duration: 6s; 
} 
@-webkit-keyframes rotate-rt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(180deg); } 
    100% { -webkit-transform: rotate(180deg); } 
} 
@-webkit-keyframes rotate-lt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(0deg); } 
    50% { -webkit-transform: rotate(120deg); } 
    100% { -webkit-transform: rotate(120deg); } 
} 
.spinner { 
    border-radius: 100%; 
    position: relative; 
} 
.spinner span { 
    width: 50%; 
    height: 100%; 
    overflow: hidden; 
    position: absolute; 
} 
.spinner span:first-child { 
    left: 0; 
} 
.spinner span:last-child { 
    left: 50%; 
} 
.spinner span em { 
    border-radius: 250px; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-fill-mode: forwards; 
} 
.spinner span:first-child em { 
    left: 100%; 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
    -webkit-animation-name: rotate-lt; 
    -webkit-transform-origin: 0 50%; 
} 
.spinner span:last-child em { 
    left: -100%; 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
    -webkit-animation-name: rotate-rt; 
    -webkit-transform-origin: 100% 50%; 
} 

Answer 1

Điều này hơi phức tạp vì có hai vòng tròn xoay vòng ở đây. Bạn thực sự muốn một (xoay-rt) để dừng lại nửa chừng và người kia (xoay-lt) để tiếp tục 120 độ còn lại (300 độ tổng cộng):

@-webkit-keyframes rotate-rt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(180deg); } 
    100% { -webkit-transform: rotate(180deg); } 
} 
@-webkit-keyframes rotate-lt { 
    0% { -webkit-transform: rotate(0deg); } 
    25% { -webkit-transform: rotate(0deg); } 
    50% { -webkit-transform: rotate(120deg); } 
    100% { -webkit-transform: rotate(120deg); } 
} 

http://jsfiddle.net/BkJY7/7/

Edit: Để làm rõ , nếu bạn muốn điều này xoay dưới 180 độ, bạn sẽ xóa toàn bộ quy tắc khung hình hoạt ảnh thứ hai: http://jsfiddle.net/BkJY7/8/

Answer 2

Bạn đang tìm kiếm -webkit-animation-fill-mode: forwards; mà dừng lại các hình ảnh động ở cuối. Bạn có thể đọc thêm về điều này tại đây: Can't stop animation at end of one cycle