¿Puedes animar un icono impresionante de fuente?

Tengo una página web con un icono de avión de papel de una fuente impresionante. ¿Es posible, dado que es una fuente, hacer que tenga una pequeña animación? Por ejemplo, haz que se contraiga y vuele y que aparezca por debajo? Con jQuery, javascript o CSS?

avión

JQuery Animation

Aquí hay un ejemplo usando JQuery y CSS. Estoy usando un icono de cohete (🚀) porque el ícono del avión no se muestra confiablemente en mi computadora (✈️ ← todo lo que puedo ver es un cuadro rectangular).

 $(document).ready(function(){ $("#plane-icon").click(function(){ $(this).animate({ left:'180px', top:'-20px', fontSize:'20px' },2000); $(this).animate({ left:'0px', top:'180px', fontSize:'100px' },0); $(this).animate({ left:'0px', top:'80px', },1000); }); }); 
 .icon-wrap { width:180px; height:180px; font-size:100px; cursor:pointer; position:relative; overflow:hidden; } #plane-icon { position:absolute; top:80px; left:0px; } 
  
🚀

¡Por supuesto! No importa si se trata de un icono de fuente o un icono de SVG, aún puede animar el elemento con CSS.

Aquí hay una animación de ejemplo:

 @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; } } 

Demostración de trabajo http://codepen.io/tedw/pen/PZXjYv