CODEWITHSUNDEEP
htmlcssanimationfont-awesome
Bartek Wojtasiński
Bartek Wojtasiński

Reputation: 1

How can I flip and animate icon together?

How can I flip the "font awesome" icon horizontally, and animate it at the same time. I used two classes (fa-flip and fa-bounce), but when I'm putting these together I can only get animation, the receiver is still returned to the left side, it have to be returned to the right

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

Upvotes: 0

Views: 651

Answers (1)

Chris W.
Chris W.

Reputation: 23270

So essentially, and by no means said to sound rude, but you'll need to dig in and learn how the animations work if you want to start creating custom stuff outside of the pre-bottled stuff that comes with things like font awesome. I'm not sure I know exactly what you're after but here's a quick proof of concept (pretend div is your icon) to maybe get you in the direction you're after and you can load it on to codepen or something to tinker to fit your needs.

In the future though, some of the folks here can be a bit demanding about showing effort or providing a minimal reproduction of an issue to make a question more concise. Either way hope this helps, cheers!

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>

Upvotes: 1

Related Questions