GSAP是第三方动画引擎类库，用GSAP来制作一些动画。
先插入一个飞机照片：
<img src="shuttle.png" id="shuttle">
对其与页面先进行设置：飞机图片定位到下边中间。
html, body{
height: 100%;
}
body{
background: #363434b6;
margin: 0%;
padding: 0%;
position: relative;
}
img{
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -50px;
margin-top: -77px;
}
然后，引入TweenMax类库，为飞机设置动画：
飞机首先延迟 1 秒（delay：1），在接下来的1秒时间内，以Back.easeOut这一弹性速率曲线（ease:Back.easeOut）移动到距离屏幕左侧250像素（left:250px），垂直居中（top:‘50%’）的位置，并且旋转90度（rotation:90）。动画结束时，将调用completeHandler函数（onComplete:completeHandler），该函数在接下来的2秒内，使飞机移动到屏幕最右侧（left:‘100%’），并且大小缩小为20%（scale: 0.2），透明度变为完全透明（opacity:0），速度曲线为先回弹再向右运动（ease:Back.easeIn）.。
<script src="js/TweenMax.min.js"></script>
<script type="text/javascript">
TweenMax.to(shuttle, 1, {top:'50%', left:250, rotation:90,
delay:1, ease:Back.easeOut, onComplete:completeHandler});
function completeHandler(e){
TweenMax.to(shuttle, 2, {left:'100%', scale: 0.2, opacity:0, ease:Back.easeIn});
}
</script>
- TweenMax.to（）：执行一条动画语句。TweenMax的第一个参数是你想进行动画的目标，第二是动画持续时间(默认是秒)，最后是要被动画的一个或多个属性。
https://www.tweenmax.com.cn/api/tweenmax/TweenMax.to() - onComplete：在动画结束时触发此回调函数。
https://www.tweenmax.com.cn/api/tweenmax/onComplete - ease：过度效果的速率曲线。
https://www.tweenmax.com.cn/api/tweenmax/ease
来源：https://blog.csdn.net/weixin_43207025/article/details/100861880