Как я могу перевернуть и анимировать значок вместе? - PullRequest
Новая
       5

Как я могу перевернуть и анимировать значок вместе?

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

Как я могу перевернуть значок "шрифт потрясающий" по горизонтали и одновременно анимировать его.Я использовал два класса (fa-flip и fa-bounce), но когда я соединяю их вместе, я могу получить только анимацию, приемник все еще возвращается на левую сторону, его нужно вернуть вправо 

<i class="fas fa-phone fa-flip-horizontal fa-bounce"></i>

1 Ответ

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

По сути, и ни в коем случае не звучит грубо, но вам нужно будет покопаться и узнать, как работают анимации, если вы хотите начать создавать собственные вещи вне предварительно упакованных вещей, которые идут с такими вещами, как шрифтклассно.Я не уверен, что точно знаю, что вы ищете, но вот быстрое подтверждение концепции (представьте, что div - ваш значок), чтобы, возможно, направить вас в нужное вам направление, и вы можете загрузить его в codepen или что-то в этом роде.чтобы приспособиться к вашим потребностям.

В будущем, однако, некоторые люди здесь могут быть немного требовательны к тому, чтобы проявить усилия или обеспечить минимальное воспроизведение проблемы, чтобы сделать вопрос более кратким.В любом случае, надеюсь, это поможет, ура! 

div {
  height: 5rem;
  width: 5rem;
  background-color: green;
  will-change: background-color;
  transition: all .25s ease;
  animation: flipThenBounce 2s linear;
  transform-style: preserve-3d;
 }
 
 @keyframes flipThenBounce {
  0% {
    background-color: red;
  }
  50% {
    transform: rotateY(180deg);
  }
  80% {
    transform: translateY(20px);
  }
  85% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(20px);
  }
  95% {
    transform: translateY(0);
  }
  100% {
    background-color: green;
  }
 }
<div></div>
...