Creare un cerchio che salta in CSS3 e HTML5

Ecco come creare un cerchio che salta in CSS3 e HTML5:

HTML:

<div class="ball"></div>

CSS:

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0% {
    top: 0;
  }
  50% {
    top: 200px;
  }
  100% {
    top: 0;
  }
}

In questo esempio, abbiamo creato un cerchio rosso con una classe “.ball” nel nostro HTML. Nel nostro CSS, abbiamo applicato alcune proprietà come la larghezza, l’altezza e il bordo a questo elemento per renderlo una palla. Inoltre, abbiamo applicato la posizione relativa e l’animazione “bounce” alla classe “.ball”.

La nostra animazione “bounce” utilizza la regola “@keyframes” per definire il movimento del cerchio. Nella posizione “0%”, il cerchio è posizionato in cima alla pagina. Nella posizione “50%”, il cerchio è posizionato a 200px dalla cima della pagina. Nella posizione “100%”, il cerchio torna alla posizione iniziale. Abbiamo impostato la durata dell’animazione a 1 secondo e abbiamo impostato l’opzione “infinite” per far sì che l’animazione continui a ripetersi.

Quando visualizzi questa pagina HTML nel tuo browser, vedrai un cerchio rosso che rimbalza su e giù all’infinito.