飞机飞到页面和着陆的CSS动画答案

【问题标题】：CSS animation of plane flying onto page and landing飞机飞到页面和着陆的CSS动画
【发布时间】：2018-04-04 04:03:11
【问题描述】：

我正在寻找一种方法来制作从页面外飞到页面上的飞机的动画。目前，我正在使用下面的代码，它非常笨拙且不流畅。你知道使用 CSS 和 HTML 更好的方法吗？如果没有，用其他方法吗？

.plane-animation{
  animation: animationFrames linear 3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform:  translate(100%,-20px)  rotate(0deg) ;
  }
  10% {
    transform:  translate(90%,-30px)  rotate(5deg) ;
  }
  20% {
    transform:  translate(80%,-40px)  rotate(15deg) ;
  }
  30% {
    transform:  translate(70%,-50px)  rotate(10deg) ;
  }  
  40% {
    transform:  translate(60%,-60px)  rotate(5deg) ;
  }
  50% {
    transform:  translate(50%,-70px)  rotate(0deg) ;
  }  
  60% {
    transform:  translate(40%,-60px)  rotate(-5deg) ;
  }
  70% {
    transform:  translate(30%,-50px)  rotate(-10deg) ;
  }
  80% {
    transform:  translate(20%,-40px)  rotate(-15deg) ;
  }
  90% {
    transform:  translate(10%,-30px)  rotate(-10deg) ;
  }
  100% {
    transform:  translate(0%,0px)  rotate(0deg) ;
  }
}

&lt;img class="plane-animation" src="http://www.jetcharterrewards.com/images/Plane%20Icons/plane-icon-4.png" alt="Paper Airplane" /&gt;

【问题讨论】：

标签： javascript html css jquery-animate css-animations

【解决方案1】：

您似乎走在了正确的轨道上，CSS 动画应该非常适合您正在解决的任务。一些快速指示：

您已经进行了前缀动画调用，例如 -webkit-、-moz-、-o- 和 -ms-。但是，您没有制作任何带前缀的关键帧。这使得第一部分被浪费了。如果您想要完全兼容浏览器，您还需要前缀关键帧和前缀转换。

像这样：

@keyframes animationFrames{
    0% {
        transform:  translate(100%,-20px)  rotate(0deg) ;
    }
    100% {
        transform:  translate(100%,-20px)  rotate(0deg) ;
    }
}

@-webkit-keyframes animationFrames{
    0% {
        -webkit-transform:  translate(100%,-20px)  rotate(0deg) ;
    }
    100% {
        -webkit-transform:  translate(100%,-20px)  rotate(0deg) ;
    }
}

....

等等。

另一部分更美观，但我建议尝试一次处理一个属性。试着先在一张纸上画出你的动画，找出它正在移动的轴和向量，然后一次编码一个。恐怕这里没有人可以给你一个完整的代码，但如果有足够的练习，我相信你会掌握动画的窍门。

【讨论】：