Implémentation d'une trajectoire de mouvement circulaire dans une animation CSS3

一个新手

Libérer： 2017-10-20 09:32:13

original

4053 Les gens l'ont consulté

En CSS3, l'animation est définie via @keyframes, et l'animation définit les attributs d'animation pour obtenir des effets d'animation

Dans l'attribut d'animation, vous pouvez spécifier le nom de l'animation, la durée d'exécution de l'animation entière ; , la courbe de vitesse du mouvement et d'autres temps de retard, temps de lecture, etc.

animation

animation, en tant qu'attribut composite, comprend les attributs d'animation suivants.

nom-animation ---------------------------------- - -Spécifie le nom de l'animation
animation-durée ------------------------------- -- ---Spécifiez l'heure à laquelle l'animation doit se terminer une fois
animation-timing-function ------------------- ------Spécifiez l'animation Courbe de vitesse de mouvement
animation-délai ------------------------ ---------- -----Spécifiez le temps de retard de l'animation
animation-iteration-count ------------ ----------- Précisez le nombre de lectures d'animation
animation-direction ------------------ --------------- Spécifie si l'animation démarrera en sens inverse lors du prochain cycle
animation-fill-mode ------ ----------- ------État en dehors de la durée d'animation spécifiée
animation-play-state -------------------------- ----------Spécifie l'exécution et la pause de l'animation

animation-timing-function

Spécifie la courbe de vitesse de l'animation. La valeur par défaut est "facilité". Les courbes de vitesse de mouvement couramment utilisées sont les suivantes :

linéaire : transition linéaire.
ease-in : du lent au rapide.
ease-out : du rapide au lent.
ease-in-out : de lent à rapide pour ralentir à nouveau.

Vous pouvez également utiliser directement la courbe de Bézier pour spécifier la courbe de vitesse de course. Les quatre valeurs de la courbe de Bézier doivent être comprises entre [0, 1]. intervalle.

animation-direction

Spécifie si l'animation sera jouée à l'envers lors du prochain cycle. La valeur par défaut est "normal".

inverse : mouvement dans le sens inverse
alterné : mouvement dans le sens normal d'abord puis dans le sens inverse, en continuant d'alterner
alternate-reverse : déplacez-vous d'abord dans le sens inverse puis dans le sens normal, en alternant continuellement

animation-fill-mode

état en dehors de la durée d'animation de l'objet spécifiée. Les valeurs couramment utilisées sont les suivantes :

aucun : valeur par défaut
forwards : définit l'état de l'objet sur l'état à la fin de l'animation
à l'envers : définir l'état de l'objet sur l'état au début de l'animation

Trajectoire de mouvement circulaire

La mise en œuvre Le code est le suivant :

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>沿圆形轨迹运动</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        #trajectory {
            width: 300px;
            height: 300px;
            border: 4px solid #949494;
            border-radius: 50%;
            position: relative;
            left: calc(50% - 153px);
            top:calc(50% - 153px);
        }
        @keyframes moveX{
            0% {left: -22px;}
            100% {left: 282px;}
        }
        @keyframes moveY{
            0% {top: -22px;}
            100% {top: 282px;}
        }
        #move {
            width: 40px;
            height: 40px;
            font-size: 12px;
            background-color: #32c33a;
            border-radius: 50%;
            position: absolute;
            left:-22px;
            top:-22px;
            animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
        }
    </style></head><body>
    <p id="trajectory">
        <p id="move">Immortal brother</p>
    </p></body></html>

Copier après la connexion

Les points à noter dans le code ci-dessus sont les suivants :

La raison pour laquelle la hauteur du corps est réglée à 100 % est que la hauteur par défaut du corps dans l'environnement HTML5 est 0
Lors de l'utilisation de calc, les espaces aux deux extrémités du "-" et du "+" entre les valeurs sont indispensables
Les valeurs de gauche et du hautdans l'animation sont le début du mouvement de l'objet. Position et position finale, veuillez faire attention à la valeur de bordure
La trajectoire de mouvement de l'animation exécutée en une seule fois n'est que la moitié du mouvement
Courbe de vitesse : cubique-bézier (0,36,0,0,64,1) ;
Réglage du temps de temporisation dans les deux sens X : -2s;Y : 0s
Positif Continuer à courir en alternance dans le sens opposé : alterné

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Implémentation d'une trajectoire de mouvement circulaire dans une animation CSS3

animation

nom-animation ---------------------------------- - -Spécifie le nom de l'animation

animation-durée ------------------------------- -- ---Spécifiez l'heure à laquelle l'animation doit se terminer une fois

animation-timing-function ------------------- ------Spécifiez l'animation Courbe de vitesse de mouvement

animation-délai ------------------------ ---------- -----Spécifiez le temps de retard de l'animation

animation-iteration-count ------------ ----------- Précisez le nombre de lectures d'animation

animation-direction ------------------ --------------- Spécifie si l'animation démarrera en sens inverse lors du prochain cycle

animation-fill-mode ------ ----------- ------État en dehors de la durée d'animation spécifiée

animation-play-state -------------------------- ----------Spécifie l'exécution et la pause de l'animation

animation-timing-function

animation-direction

animation-fill-mode

Trajectoire de mouvement circulaire