css - 使用 CSS 动画添加弹跳效果

Question

我正在通过尝试复制以下新的谷歌广告 Logo 来使用 CSS 动画 - example .

在绿球上添加弹跳效果的最佳方法是什么？

我当前的动画:

@keyframes greenblock {
  0% {
    top: 0px;
  }
  50% {
    top: 45px;
  }
  100% {
    bottom: 0px;
  }
}

我的代码(fiddle):

.wrap {
  border: 1px solid red;
  height: 300px;
  width: 300px;
  position: relative
}

.blue-shape {
  position: absolute;
  left: 100px;
  top: 0px;
  width: 45px;
  height: 45px;
  background: #4285F4;
  display: block;
  border-radius: 45px;
  animation: blueblock 2s forwards;
  transform-origin: top center;
}

.yellow-shape {
  position: absolute;
  left: 122px;
  top: 0px;
  width: 45px;
  height: 45px;
  background: #FBBC04;
  display: block;
  border-radius: 45px;
  animation: yellowblock 2s forwards;
  transform-origin: top center;
}

.green-ball {
  position: absolute;
  border-radius: 45px;
  width: 45px;
  height: 45px;
  background: #34A853;
  animation: greenblock 1.5s forwards;
}

@keyframes blueblock {
  0% {
    height: 45px;
  }
  25% {
    height: 140px;
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-30deg);
  }
  100% {
    height: 140px;
    transform: rotate(-30deg);
  }
}

@keyframes yellowblock {
  0% {
    height: 45px;
    opacity: 0;
  }
  25% {
    height: 140px;
    transform: rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: rotate(30deg);
  }
  100% {
    height: 140px;
    transform: rotate(30deg);
    opacity: 100;
    left: 122px;
  }
}

@keyframes greenblock {
  0% {
    top: 0px;
  }
  50% {
    top: 45px;
  }
  100% {
    bottom: 0px;
  }
}

<div class="wrap">
  <div class="yellow-shape">
    <div class="green-ball">

    </div>
  </div>
  <div class="blue-shape">

  </div>
</div>

Answer 1

我试过这个动画

animation: greenblock .6s ease-in-out .5s forwards;

和这组关键帧

@keyframes greenblock {
   0% {  top: 0px; }
   75% {  top: calc(100% - 55px); }
   50%, 100% { top: calc(100% - 45px); }
}

Demo

---

.wrap {
  border: 1px solid red;
  height: 300px;
  width: 300px;
  position: relative
}

.blue-shape {
  position: absolute;
  left: 100px;
  top: 0px;
  width: 45px;
  height: 45px;
  background: #4285F4;
  display: block;
  border-radius: 45px;
  animation: blueblock 2s forwards;
  transform-origin: top center;
}

.yellow-shape {
  position: absolute;
  left: 122px;
  top: 0px;
  width: 45px;
  height: 45px;
  background: #FBBC04;
  display: block;
  border-radius: 45px;
  animation: yellowblock 2s forwards;
  transform-origin: top center;
}

.green-ball {
  position: absolute;
  border-radius: 45px;
  width: 45px;
  height: 45px;
  background: #34A853;
  animation: greenblock .6s ease-in-out .5s forwards;
}

@keyframes blueblock {
  0% {
    height: 45px;
  }
  25% {
    height: 140px;
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-30deg);
  }
  100% {
    height: 140px;
    transform: rotate(-30deg);
  }
}

@keyframes yellowblock {
  0% {
    height: 45px;
    opacity: 0;
  }
  25% {
    height: 140px;
    transform: rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: rotate(30deg);
  }
  100% {
    height: 140px;
    transform: rotate(30deg);
    opacity: 100;
    left: 122px;
  }
}

@keyframes greenblock {
   0% {  top: 0px; }
   75% {  top: calc(100% - 55px); }
   50%, 100% { top: calc(100% - 45px); }
}

<div class="wrap">
  <div class="yellow-shape">
    <div class="green-ball">

    </div>
  </div>
  <div class="blue-shape">

  </div>
</div>