CSS glatte bounce-animation

Ich brauchte, um zu realisieren unendliche bounce-Effekt mit reinem CSS, also bezog ich mich diese Website und endete damit, dass diese.

CSS:

.animated {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
} 

@-webkit-keyframes bounce {
  0%, 20%, 40%, 60%, 80%, 100% { -webkit-transform: translateY(0);}
  50% { -webkit-transform: translateY(-5px);}
} 

@keyframes bounce { 
  0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}
  50% {transform: translateY(-5px);}
} 

.bounce { 
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

#animated-example {
    width: 20px;
    height: 20px;
    background-color: red;
    position: relative;
    top: 100px;
    left: 100px;
    border-radius: 50%;
}

hr {
    position: relative;
    top: 92px;
    left: -300px;
    width: 200px;
}

HTML:

<div id="animated-example" class="animated bounce"></div>
<hr>

Nun, mein problem ist nur das bouncing-element nimmt eine längere Pause, bevor es beginnt Prellen wieder. Wie kann ich machen, hüpfen reibungslos, genau wie die bounce-Effekt wir durch den Einsatz jQuery.animate?

InformationsquelleAutor Abhi | 2015-08-31

38

Lange Pause dazwischen ist aufgrund Ihrer keyframe-Einstellungen. Ihre aktuelle keyframe-Regeln bedeuten, dass die tatsächliche bounce passiert nur zwischen 40% - 60% der Animations Dauer (das heißt, zwischen 1s - 1,5 s mark von der animation). Entfernen Sie diese Regeln und vielleicht sogar reduzieren die animation-duration an Ihre Bedürfnisse anpassen.

CSS:
```
.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}
#animated-example {
  width: 20px;
  height: 20px;
  background-color: red;
  position: relative;
  top: 100px;
  left: 100px;
  border-radius: 50%;
}
hr {
  position: relative;
  top: 92px;
  left: -300px;
  width: 200px;
}
```
HTML:
```
<div id="animated-example" class="animated bounce"></div>
<hr>
```
Hier ist, wie Ihre ursprüngliche keyframe - Einstellungen werden vom browser interpretiert:
- Bei 0% (d.h. auf 0 oder start-animation) - translate von 0px in der Y-Achse.
- Bei 20% (das heißt, bei 0,5 s animation) - translate von 0px in der Y-Achse.
- Bei 40% (d.h. in 1s animation) - translate von 0px in der Y-Achse.
- Bei 50% (das ist, bei 1,25 s animation) - translate von 5px in der Y-Achse. Dies führt zu einer allmählichen Aufwärtsbewegung.
- Bei 60% (das heißt, bei 1,5 s animation) - translate von 0px in der Y-Achse. Dies führt zu einer allmählichen Abwärtsbewegung.
- Bei 80% (das ist bei 2s animation) - translate von 0px in der Y-Achse.
- Bei 100% (das heißt, auf 2,5 s oder Ende der animation) - translate von 0px in der Y-Achse.
- Oh, Sie tippte ein bisschen schneller als ich.
- Vielen Dank, es funktioniert 🙂 . Akzeptieren kann in rund 7 Minuten.
- Froh, dass es geholfen 🙂
InformationsquelleAutor Harry
16

Hier ist der code nicht mit dem Prozentsatz in der keyframes.
Wegen der Verwendung von Prozentsätzen der animation nichts tut, eine lange Zeit.
- 0% übersetzen 0px
- 20% übersetzen 0px
- etc.
Wie funktioniert dieses Beispiel:
1. Setzen wir animation. Dies ist ein kurzer hand für die Eigenschaften der animation.
2. Wir sofort starten der animation, da wir from und to in der keyframes. aus = 0% und zu ist = 100%
3. Wir können jetzt Steuern, wie schnell es aufprallt, durch die Einstellung der animation Zeit: animation: bounce 1s infinite alternate; den 1er ist, wie lange die animation dauern wird.
CSS:
```
.ball {
  margin-top: 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  border: 2px solid #999;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
```
HTML:
```
<div class="ball"></div>
```
InformationsquelleAutor Persijn

Fall, dass Sie bereits mithilfe der transform-Eigenschaft für die Positionierung Ihrer Elemente (wie ich derzeit bin), können Sie auch animieren, den oberen Rand:

.ball {
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -15px;
  }
}

InformationsquelleAutor GerritElbrink

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.