CSS3 Xoay từ 0 đến 90 rồi 90 đến 180

Question

Tôi có đối tượng xoay 360 độ bằng hoạt ảnh xoay của CSS3. Tuy nhiên, mã (được liên kết bên dưới) xoay hình 360 độ rồi lặp lại cùng một hình động.

Tôi muốn xoay 360 độ, tạm dừng mỗi 90 degress và quay vô hạn.

Mọi trợ giúp sẽ được đánh giá cao.

Cảm ơn

.image { 
position: absolute; 
top: 50%; 
left: 50%; 
width: 120px; 
height: 120px; 
margin:-60px 0 0 -60px; 
-webkit-animation:spin 1s ease-in-out infinite; 
-moz-animation:spin 1s linear infinite; 
animation:spin 1s 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); } } 

Đây là một JSFiddle for the project

Answer 1

Bạn cần phải thêm điểm bổ sung trong keyframe của bạn:

Fiddle

@-webkit-keyframes rotate { 
    0% { -webkit-transform: rotate(0deg); } 
    20% { -webkit-transform: rotate(90deg); } 
    25% { -webkit-transform: rotate(90deg); } 
    45% { -webkit-transform: rotate(180deg); } 
    50% { -webkit-transform: rotate(180deg); } 
    70% { -webkit-transform: rotate(270deg); } 
    75% { -webkit-transform: rotate(270deg); } 
    100% { -webkit-transform: rotate(360deg); } 
} 

.animation-rotate { 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 4.5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transition-timing-function: linear; 
} 

Answer 2

Nếu bạn chỉ muốn nó dừng lại sau khi nó quay chỉ loại bỏ các modifier vô hạn:

http://jsfiddle.net/Ugc5g/30/

.image { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 120px; 
    height: 120px; 
    margin:-60px 0 0 -60px; 
    -webkit-animation:spin 4s ease-in-out; // No more infinite 
    -moz-animation:spin 4s linear; 
    animation:spin 4s linear; 
} 
@-moz-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
} 
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
} 
@keyframes spin { 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
} 

Nếu bạn muốn dừng hoạt ảnh ở số gia tăng một chút khó khăn hơn:

http://jsfiddle.net/Ugc5g/31/

.image { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 120px; 
    height: 120px; 
    margin:-60px 0 0 -60px; 
    -webkit-animation:spin 4s ease-in-out infinite; 
    -moz-animation:spin 4s linear infinite; 
    animation:spin 4s linear infinite; 
} 
@-moz-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 
    25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 
    50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } 
    50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } 
    75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); } 
    75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); } 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
} 
@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 
    25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 
    50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } 
    50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } 
    75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); } 
    75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); } 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
} 
@keyframes spin { 
    0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
    25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 
    25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 
    50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } 
    50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } 
    75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); } 
    75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); } 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
}