Wie verwenden von css3 zu erreichen, ein ball-bounce-Effekt?

In der Tat habe ich fast Erfolg:
Ich habe eine div benötigt, um bounce :

<div class="container">
    <div class="flipcard transition allowhover">
        <h1>This is card</h1>
    </div>
</div>

dann verwende ich css3 animieren zu erreichen bounce-Effekt:

.container{
    width: 100%;
    height: 100%;
    -moz-perspective: 1000px;
}
.flipcard{
    background: red;
    width: 200px;
    height: 300px;
    position: absolute;
    top: 40px;
    left: 20px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition:all 0.6s ease-in-out;
}
.allowhover:hover{
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite ;
    -webkit-animation-direction: normal;
}


@-webkit-keyframes bounce {
   25% {
     top:7px;
   }
   45% {
     top:40px;
   }
   64% {
      top:19px;
   }
   76% {
      top:40px;
   }
   96%{
      top: 25px
   }
   100% {
      top:40px;
   }
}​

nun die online-Beispiel ist hier :http://jsfiddle.net/GEEtx/

Scheint es funktionieren, aber nicht gut genug,wie soll ich den key-frames parameter an, damit es mehr hüpfen wie ein ball?Gibt es eine Formel zur Berechnung der bounce-Höhe und countaccording dem element die Breite und Höhe oder die Zeit?

  • Sieht gut aus für mich. Was ist 'mehr wie einen ball"?
InformationsquelleAutor hh54188 | 2012-06-01
Schreibe einen Kommentar