Question

如何水平翻转“真棒字体”图标，并同时对其进行动画处理。我使用了两个类（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>

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

1 个答案: