使用 CSS 动画添加反弹效果答案

【问题标题】：Adding a bounce effect using CSS animation使用 CSS 动画添加反弹效果
【发布时间】：2018-10-05 20:34:47
【问题描述】：

我正在尝试复制以下新的谷歌广告徽标 - example，来玩转 CSS 动画。

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

我现在的动画：

@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>

【问题讨论】：

标签： css animation css-animations

【解决方案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>

【讨论】：