css3을 사용하여 볼 바운스 효과를 얻는 방법은 무엇입니까? 사실

Question

는 거의 successs 있습니다

이

.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; 
    } 
}​ 

지금 온라인 예제는 여기에 있습니다 : :

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

그때 내가 바운스 효과를 달성하기 위해 CSS3의 애니메이션을 사용 을 나는 div가 반송 할 필요가 http://jsfiddle.net/GEEtx/

작동하지는 않지만 충분히 좋지 않습니다. key-frames 매개 변수를 공과 같이 바운스하도록 설정해야합니까? b를 계산하는 공식이 있습니까? 요소의 너비와 높이 또는 시간에 따라 온스 높이와 카운트?

Answer 1

시행 착오를 최소화하면서 필요한 경우 바운스 효과를 계산할 수 있습니다.

바운스 효과를 얻으려면 모든 jQuery easing 플러그인에서 사용되는 수식이 있습니다.

 easeInBounce: function (x, t, b, c, d) { 
       return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; 
     }, 
     easeOutBounce: function (x, t, b, c, d) { 
       if ((t/=d) < (1/2.75)) { 
         return c*(7.5625*t*t) + b; 
       } else if (t < (2/2.75)) { 
         return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
       } else if (t < (2.5/2.75)) { 
         return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
       } else { 
         return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
       } 

// t: current time, b: begInnIng value, c: change In value, d: duration 

이렇게 이것을 현재 CSS 키 프레임에 적용하십시오.
d : 애니메이션 재생 시간입니다. //1.5 : 1500
B : 시작시 최고 값 // 0
C :이 우리를 적용하여 그것에 몇 가지 더 많은 작업으로 현재 시간 // 10

: 값 // 40px
t의 변화 CSS에서 바운스 효과에 필요한 값을 찾을 수 있습니다.

는 또한 당신을 도울 수있는이 CSS3 3D Bouncing Ball tutorial

희망을 발견했다.