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

时间:2016-02-10 21:30:54

标签: javascript jquery html css animation

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

plane

2 个答案:

答案 0 :(得分:7)

当然!如果它是字体图标或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

答案 1 :(得分:2)

JQuery动画

这是使用JQuery和CSS的示例。我正在使用火箭图标()因为平面图标在我的计算机上无法可靠显示(✈️←所有我能看到的是一个矩形框)。

$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-wrap">
  <span id="plane-icon"></span>
</div>

CSS动画

这是使用CSS关键帧动画而不是JQuery的animate()函数完成的相同动画。 animationend事件触发器用于在完成动画制作后重置对象的CSS类。

$(document).ready(function(){
  $('body').on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
    function(){
      $('#plane-icon').removeClass('launched');
    }
  );
  $('#plane-icon').click(function(){
    $(this).addClass('launched');
  });
});
.icon-wrap {
  width:180px;
  height:180px;
  font-size:100px;
  overflow:hidden;
}

#plane-icon {
  display:block;
  cursor:pointer;
  transform:translate(0px,80px) scale(1);
}

#plane-icon.launched {
  animation-name:rocket;
  animation-duration:3s;
  cursor:default;
}


@keyframes rocket {
  0% {
    transform:translate(0px,80px) scale(1);
  }
  66% {
    transform:translate(120px,-80px) scale(0.1);
  }
  67% {
    transform:translate(120px,180px) scale(0.1);
  }
  68% {
    transform:translate(0px,180px) scale(1);
  }
  100% {
    transform:translate(0px,80px) scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-wrap">
  <span id="plane-icon"></span>
</div>