Заставить элемент упасть и отскочить, не проходя его статическое положение - PullRequest
Новая
       7

Заставить элемент упасть и отскочить, не проходя его статическое положение

0 голосов
/ 19 февраля 2019

я пытаюсь сделать CSS-анимацию с ключевыми кадрами, где div падает и отскакивает один раз, прежде чем стать неподвижным

Мне удалось получить это до сих пор 

 @keyframes bounce{
  0%{
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
   }
  60%{
    opacity: 1;
    transform: translateY(30px) rotate(-45deg);
    }
  80%{
    transform: translateY(-10px) rotate(-45deg)
    }
  100%
  {
    transform: translateY(0) rotate(-45deg)
    }
}

Это вродеотказов, но он идет в исходное положение, как упругий, но я хотел жесткий пол, поэтому он не идет в исходное положение.Вот мой jsfiddle:

https://jsfiddle.net/s42t6wua/

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Вы можете рассмотреть эффект масштабирования, чтобы получить это: 

.pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: blue;
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: bottom; /*don't forget this*/
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
  animation-name: bounce;
  animation-fill-mode: both;
  animation-duration: 1s;
}

@keyframes bounce {
  0% {
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
  }
  60% {
    opacity: 1;
    transform:scaleY(0.6) translateY(30px) rotate(-45deg);
  }
  100% {
    transform:  scaleY(1) translateY(0) rotate(-45deg);
  }
}
<div class='pin'></div>
0 голосов
/ 19 февраля 2019

Похоже, что просто возиться со своими цифрами немного делает свою работу.

  60% {
    opacity: 1;
    transform: translateY(0px) rotate(-45deg);
  }
  80% {
    transform: translateY(-20px) rotate(-45deg)
  }

Вот несколько демонстраций с помеченной базовой линией.

Оригинал Обновлено

...