Can you animate a font awesome icon? [closed]

Question

I have a webpage with a paper airplane icon from font awesome. Is it possible, since it is a font, to make it have a small animation? For example, make it shrink and fly away and the appear from under? With jQuery, javascript or CSS?

Answer 1

Sure! It doesn’t matter if it’s a font icon or an SVG icon, you can still animate the element with CSS.

Here’s an example animation:

@keyframes fly {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(0.5) translate(100vw, -100vh);
  }
}

.plane {
  display: inline-block;
  fill: #e24145;// for demo purposes, only applies to SVGs

  &.is-active {
    animation-name: fly;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
  }
}

Working demo http://codepen.io/tedw/pen/PZXjYv

Answer 2

JQuery Animation

Here's an example using JQuery and CSS. I'm using a rocket icon (

查看更多

0人赞 添加讨论(0) 举报