简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Implémentation d'une trajectoire de mouvement circulaire dans une animation CSS3

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

一个新手
一个新手original
2017-10-20 09:32:133997parcourir

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>

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 haut​​dans 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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：À propos de la fonctionnalité relative en CSSArticle suivant：À propos de la fonctionnalité relative en CSS

Articles Liés

Voir plus