Добавление эффекта отскока с помощью CSS-анимации - PullRequest
Новая
       8

Добавление эффекта отскока с помощью CSS-анимации

0 голосов
/ 05 октября 2018

Я играю с CSS-анимацией, пытаясь воспроизвести следующий новый логотип Google Ads - пример .

Как лучше всего добавить эффект отскакивания на зеленый шар??

Моя текущая анимация: 

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

Мой код ( скрипка ): 

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

1 Ответ

0 голосов
/ 05 октября 2018

Я пробовал с этой анимацией 

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

и с этим набором ключевых кадров 

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

Демо 

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