さぁ!検索しよう!

HTMLとCSSで作ったバスケットボールをCSS3のキーフレームアニメーションでバウンドさせる方法です。

DEMO

HTML

.ballはボール、spanはボールの黒い線となります。

<div class="ball">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

* {
  box-sizing: border-box;
}

.ball {
  -webkit-animation: bounce 0.8s linear infinite;
  animation: bounce 0.8s linear infinite;
  background: #A6341F;
  color: #fff;
  height: 50px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50px;
}

span {
  border: 1px solid #333;
  position: absolute;
}

span:nth-child(1),
span:nth-child(2),
span:nth-child(3) {
  height: 100%;
  top: 0;
  width: 50px;
}

.ball,
span:nth-child(1),
span:nth-child(2) {
  border-radius: 50%;
}

span:nth-child(1) {
  left: -37px;
}

span:nth-child(2) {
  right: -37px;
}

span:nth-child(3) {
  left: 50%;
  margin-left: -1px;
}

span:nth-child(4) {
  height: 1px;
  margin-top: -1px;
  top: 50%;
  left: 0;
  width: 100%;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  10% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  20% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  30% {
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
  }
  40% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  50% {
    -webkit-transform: translateY(25px);
    transform: translateY(25px);
  }
  60% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  70% {
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
  }
  80% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  90% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  10% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  20% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  30% {
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
  }
  40% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  50% {
    -webkit-transform: translateY(25px);
    transform: translateY(25px);
  }
  60% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  70% {
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
  }
  80% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  90% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

CSSのポイントは以下の通りです。

はみ出た黒い線を隠す

ボールからはみ出た黒い線をoverflow:hidden;で隠しています。

.ball {
  overflow: hidden;
}

黒い線については下記の通りです。

黒い線 位置
span:nth-child(1) 左側の縦曲線
span:nth-child(2) 右側の縦曲線
span:nth-child(3) 中央の縦線
span:nth-child(4) 中央の横線

アニメーションをさせるには

バウンドアニメーションは以下のようにして行います。

1. キーフレームの設定

@keyframesでキーフレームを設定します。キーフレーム名はbounceとしており、バウンドはtranslateYの値を変化させることで表現しています。

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  10% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  20% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  30% {
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
  }
  40% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  50% {
    -webkit-transform: translateY(25px);
    transform: translateY(25px);
  }
  60% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  70% {
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
  }
  80% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  90% {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

2. ボールをアニメーションさせる

ボールをアニメーションさせるには、以下のように.ballanimationプロパティの値に、1.で設定したキーフレームと時間、イージング、再生回数animationプロパティの値に指定します。

.ball {
  -webkit-animation: bounce 0.8s linear infinite;
  animation: bounce 0.8s linear infinite;
}

以上で、HTML+CSSで作るバウンドするバスケットボールを終わります。