Comment obtenir un effet d'animation de balle rebondissante avec CSS ? Exemple d'implémentation d'une animation de balle rebondissante

Comment obtenir un effet d'animation de balle rebondissante avec CSS ? Cet article vous expliquera comment obtenir l'effet d'animation de balle rebondissante en CSS à travers des exemples de code. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Définir les images clés de l'animation

Pour cette animation, nous utiliserons deux images clés - une pour traduire la balle horizontalement avec une vitesse constante et une autre pour appliquer grossièrement la parabole. mouvement de rebond vertical. Il est possible de combiner la traduction horizontale et verticale en une seule image clé, mais cela ne fonctionnera pas pour l'effet recherché.

Le mouvement horizontal peut être facilement réalisé à l'aide de l'image clé suivante :

 @-webkit-keyframes travel {
    from {              }
    to   { left: 640px; }
  }
  @keyframes travel {
    from {              }
    to   { left: 640px; }
  }

Cette image clé sera référencée ultérieurement en utilisant le nom attribué "voyage" et appliquée en utilisant linéaire (fonction de synchronisation de transformation) Cette image clé , cette fonction change de direction à chaque itération.

Pour l'animation de rebond vertical, nous allons profiter de la facilité d'utilisation des fonctionnalités de synchronisation d'entrée et de sortie pour simuler les effets des champs de gravité :

 @-webkit-keyframes bounce {
    from, to  {
      bottom: 0;
      -webkit-animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      -webkit-animation-timing-function: ease-in;
    }
  }
  @keyframes bounce {
    from, to  {
      botttom: 0;
      animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      animation-timing-function: ease-in;
    }
  }

L'image clé a été nommée "bounce" » pour référence future.

La combinaison de ces deux images clés déplacera notre « boule » de 640 pixels horizontalement et de 220 pixels verticalement. Bien entendu, ces valeurs doivent être ajustées pour s'adapter à la taille de la « scène ».

2. Préparer le terrain pour l'animation

Comme d'habitude, nous préparons d'abord une « scène » dans laquelle exécuter l'animation. Dans ce cas, un simple DIV de dimensions 660 x 240 pixels. Avoir une largeur de 100 % serait bien, mais placer certains éléments sans connaître la largeur exacte des pixels est difficile.

#stage {
    position: relative;
    margin: 1em auto;
    width: 660px;
    height: 240px;
    border: 2px solid #666;
    background: #cff;
  }

A ce stade, nous allons mettre en place un élément DIV qui se déplace d'avant en arrière horizontalement, et à l'intérieur de lui un DIV représentant une "balle" qui rebondit de haut en bas :

#traveler {
    position: absolute;
    width: 20px;
    height: 240px;
    -webkit-animation-name: travel;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 4.8s;
    animation-name: travel;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 4.8s;
  }
  #bouncer {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 10px;
    -webkit-animation-name: bounce;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4.2s;
    animation-name: bounce;
    animation-iteration-count: infinite;
    animation-duration: 4.2s;
  }

Donc 'boule' Les dimensions sont de 20 x 20 pixels avec les coins arrondis.

3. Définissez le mouvement de la balle

Nous avons complété quelques balises HTML simples :

<div id="stage">
   <div id="traveler">
       <div id="bouncer"><!-- --></div>
   </div>
</div>

Si votre navigateur le prend en charge, l'animation démarrera automatiquement. et continuez indéfiniment dans la case (ou #stage) suivante :

Nous avons ajouté un extra élément et quelques styles pour mettre en évidence les composants x et y de l'animation, aucun JavaScript requis, le reste du code est exactement comme indiqué.

CSS : rebond-animation.css (https://www.the-art-of-web.com/bounce-animation.css)

Vous avez terminé !

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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!