如何将图标一起翻转和动画？

Question

如何水平翻转“font awesome”图标，同时为其设置动画。我使用了两个类（fa-flip和fa-bounce），但是当我把它们放在一起时我只能得到动画，接收器仍然返回到左侧，它必须返回到右侧

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

Answer 1

所以基本上，并不是说听起来很粗鲁，但你需要深入了解动画是如何工作的，如果你想开始在预先装瓶的东西之外创建自定义的东西，比如字体很棒的东西。我不确定我到底知道你到底发生了什么，但是这里是一个快速的概念证明（假装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>