May 1, 2015

Bouncing Ball

Bouncing Ball

Bouncing ball using CSS3 animations. You use different images instead of the ball image and have fun.

HTML

<div class="dance-container">
  <div class="avatar-container">
    <div class="avatar"></div>
  </div>
  <div class="shadow"></div>
</div>

SCSS

body {
  background: #36465D;
}

$jump-duration: 0.5s;
$jump-easing: cubic-bezier(0.895, 0.03, 0.685, 0.22);

.dance-container {
  height: 64px;
  left: 50%;
  margin: 32px 0 0 -32px;
  position: absolute;
  top: 50%;
  width: 64px;
}

.shadow {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  height: 8px;
  left: -10%;
  margin-top: -4px;
  position: absolute;
  top: 100%;
  width: 120%;
  z-index: 1;
  @include animation(shadow $jump-duration linear infinite alternate);
  @include transform(translateX(-50%));
}

.avatar-container {
  height: 64px;
  left: 0;
  position: absolute;
  top: 0;
  width: 64px;
  z-index: 2;
  @include animation(the-forbidden-dance $jump-duration linear infinite alternate);
  @include transform-origin(center bottom);
}

.avatar {
  background: url('http://pngimg.com/upload/basketball_PNG1096.png') no-repeat center center;
  background-size: contain;
  border-radius: 3px;
  height: 100%;
  width: 100%;
  @include animation(do-a-flip $jump-duration * 20 linear $jump-duration infinite)
}

@include keyframes(the-forbidden-dance) {
  0% {
    @include transform(translate3d(0, -180px, 0) scaleY(1));
    @include animation-timing-function($jump-easing);
  }
  80% {
    @include transform(translate3d(0, 0, 0) scaleY(2) scaleX(0.6));
  }
  90% {
    @include transform(translate3d(0, 0, 0) scaleY(0.4) scaleX(1));
  } 
  100% {
    @include transform(translate3d(0, 0, 0) scaleY(0.25) scaleX(2));
  }
}

@include keyframes(do-a-flip) {
  0% { @include transform(rotate(0deg)); }
  21% { @include transform(rotate(0deg)); @include animation-timing-function($ease-out-cubic); }
  28% { @include transform(rotate(-360deg)); }
  71% { @include transform(rotate(-360deg)); @include animation-timing-function($ease-out-cubic); }
  78% { @include transform(rotate(360deg)); }
  100% { @include transform(rotate(360deg)); }
}

@include keyframes(shadow) {
  0% { opacity: 0.5; @include transform(scaleX(0.5) scaleY(0.5)); @include animation-timing-function($jump-easing); }
  90% { opacity: 1; @include transform(scaleX(1.15) scaleY(0.1)); }
  100% { opacity: 1; @include transform(scaleX(1.15) scaleY(0.1)); }
}
demo

No comments:

Post a Comment

Popular Posts

Views