Ruota un elemento sull'asse Y

Question

Ho impostato una semplice animazione del fotogramma chiave per ruotare un elemento sull'asse Y ma è instabile, mi manca una proprietà?

.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

L'effetto "mosso" viene creato a causa del difetto animation-timing-function (agio), è necessario impostare a linear.

Inoltre v'è alcun punto in specificando stati al 20%, 40% ... per l'animazione fotogramma chiave, si può solo specificare lo stato finale con la "a" parola chiave:

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

Si noti inoltre che è necessario utilizzare i prefissi dei fornitori in base ai browser che si desidera supportare. Vedi canIuse per maggiori informazioni.

Answer 2

Intendevi che fosse così?

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

Le modifiche sono da aggiungere una funzione di temporizzazione che è lineare (anziché una facilità), e per rendere l'animazione un po 'più chiaro da quanto sta succedendo.