Wie zum erstellen von CSS3-bounce-Effekt

Ich versuche zum erstellen einer bounce-Effekt am Ende der animation ohne 3rd-party-code oder javascript. Ich habe keine Ahnung, wie dies zu tun, nur mit reinem CSS.

Hier ist was ich habe, so weit:

HTML:

<div></div>
<div></div>
<div></div>

CSS:

div {
    background:  tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in;
    transform-origin: top left;
}
div:hover { 
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5);
}

DEMO

InformationsquelleAutor Monkey D Luffy | 2015-04-22

24

Wenn alles, was Sie brauchen, ist eine sehr einfache bounce, es ist so einfach wie nur änderung der übergangs-Funktion von ease-in zu etwas anderem, wie ein cubic-bezier.

Ein Beispiel für eine cubic-bezier Funktion, die bounces wäre
```
cubic-bezier(0.175, 0.885, 0.32, 1.275)
```
Einem vollständigen Beispiel:

CSS:
```
div {
    background:  tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top left;
}
div:hover {
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5);
}
```
HTML:
```
<div></div>
<div></div>
<div></div>
```
Finden Sie ein paar Beispiele von anderen easings an easings.net, oder eine vollständige cubic-bezier-editor unter cubic-bezier.com.
- Das ist genau das was ich brauchte.
- cubic-bezier was ein muss!!!
InformationsquelleAutor Henrik Karlsson

Ich bin ein fan von der Animation.css

http://daneden.github.io/animate.css/

Zufällig, die erste animation ist bounce.

Können Sie extrahieren Sie den code, den Sie benötigen, aus der css-Datei.

Mithilfe animieren.css-Frameworks, die ich extrahiert haben Ihre bounce-animation und haben ein snippet unter:

CSS:

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

div{background:red; padding:50px;}

HTML:

<div class="bounce animated">bounce</div>

Danke 🙂 hab die Logik hinter diesem. Das hat mir wirklich geholfen, wo man hinschauen soll

InformationsquelleAutor xengravity

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.