如何将图标一起翻转和动画？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将图标一起翻转和动画？相关的知识，希望对你有一定的参考价值。
如何水平翻转“font awesome”图标，同时为其设置动画。我使用了两个类（fa-flip和fa-bounce），但是当我把它们放在一起时我只能得到动画，接收器仍然返回到左侧，它必须返回到右侧
<i class="fas fa-phone fa-flip-horizontal fa-bounce"></i>
答案
所以基本上，并不是说听起来很粗鲁，但你需要深入了解动画是如何工作的，如果你想开始在预先装瓶的东西之外创建自定义的东西，比如字体很棒的东西。我不确定我到底知道你到底发生了什么，但是这里是一个快速的概念证明（假装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>以上是关于如何将图标一起翻转和动画？的主要内容，如果未能解决你的问题，请参考以下文章