Xoay phần tử trên trục Y

Question

Tôi thiết lập hoạt ảnh khung hình đơn giản để xoay phần tử trên trục Y nhưng nó bị thay đổi, tôi có thiếu thuộc tính không?

.circle { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    border: 5px solid black; 
 
    margin: auto; 
 
    animation: rotateY 1s infinite; 
 
} 
 
@-webkit-keyframes rotateY { 
 
    0% { transform: rotateY(60deg); } 
 
    20% { transform: rotateY(120deg); } 
 
    40% { transform: rotateY(180deg); } 
 
    60% { transform: rotateY(240deg); } 
 
    80% { transform: rotateY(300deg); } 
 
    100% { transform: rotateY(360deg); } 
 
}

<div class="circle"></div>

Answer 1

Hiệu quả "choppy" được tạo ra vì mặc định animation-timing-function (dễ), bạn nên đặt nó vào linear.

Cũng không có điểm quy định cụ thể các quốc gia ở mức 20%, 40% ... cho hoạt hình keyframe, bạn chỉ có thể xác định tình trạng kết thúc với "thành" từ khóa:

.circle { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    border: 5px solid black; 
 
    margin: auto; 
 
    -webkit-animation: rotateY 1s infinite linear; 
 
    animation: rotateY 1s infinite linear; 
 
} 
 
@-webkit-keyframes rotateY { 
 
    to { -webkit-transform: rotateY(360deg); } 
 
} 
 
@keyframes rotateY { 
 
    to { transform: rotateY(360deg); } 
 
}

<div class="circle"></div>

Lưu ý rằng bạn cũng cần phải sử dụng tiền tố của nhà cung cấp tùy thuộc vào trình duyệt bạn muốn hỗ trợ. Xem canIuse để biết thêm thông tin.

Answer 2

Ý bạn là giống như thế này?

.circle { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    border: 5px solid black; 
 
    margin: auto; 
 
    animation: rotateY 1s infinite; 
 
    animation-timing-function: linear; 
 
} 
 
@-webkit-keyframes rotateY { 
 
    0% { 
 
    transform: rotateY(0deg); 
 
    } 
 
    100% { 
 
    transform: rotateY(360deg); 
 
    } 
 
}

<div class="circle"></div>

Những thay đổi có thêm một chức năng thời gian đó là tuyến tính (chứ không phải là một cách dễ dàng), và để làm cho hình ảnh động một chút rõ ràng hơn về những gì đang xảy ra.