Как сделать такую анимацию?

Question

[PAJCH]

Привет!
Как сделать такую анимацию для монеты?

https://youtu.be/uJigHsgJgg8?t=4m46s

Answer 1

[Ivan Ukhov]

Там же в исходниках написано

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

Answer 2

[Alexander Pushkarev]

Смотрите исходники https://daneden.github.io/animate.css/ или используйте

Answer 3

[Алекс Глебов]

https://codepen.io/yoannhel/pen/bhCjn?q=flip+anima...

упрощенно тут

Comments

[PAJCH]

Спасибо. Тут просто поворот. Я имел ввиду с rotateX и scale с анимацией

[Сергей Горячев]

PAJCH: Берешь и допиливаешь. Что за хрень?))) Ты ж сам знаешь решение)

[Алекс Глебов]

там уже мелочи допилить
пройдите курсы хтмл академии по анимации, если сложно кажется.