你能为一个字体真棒图标设置动画吗？

Question

我有一个带有纸质飞机图标的网页,字体很棒.是否有可能,因为它是一种字体,使它有一个小动画？例如,让它缩小并飞走,从下面出现？用jQuery,javascript还是CSS？

Answer 1

当然!如果它是字体图标或SVG图标无关紧要,您仍然可以使用CSS为元素设置动画.

这是一个动画示例:

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

工作演示http://codepen.io/tedw/pen/PZXjYv