簡要教程
Flyaway.css是一款使用純CSS3制作的炫酷紙飛機動畫特效。Flyout模式可以應用于登錄頁面，信息發送成功，如果填的信息有誤，可以使用Shake模式，代表信息輸入有誤。
Flyaway.css的作者是進擊的燊，該紙飛機可以是font awesome提供的飛機圖標，也可以是svg圖，利用jQuery添加相應屬性，會獲得相應的動畫效果。
使用方法
使用該紙飛機動畫特效需要在頁面中引入flyaway.min.css文件，如果需要動態的調用紙飛機的動畫，可以使用jQuery來動態的添加和移除相應的class類。
HTML結構
以使用font awesome字體圖標的飛機圖標為例，HTML結構如下：
CSS樣式
該紙飛機動畫的預置class類如下：
flyaway為基本屬性，一定要添加。在添加完在這個基本屬性后，再添加后續的class屬性，實現動畫效果。
Flyout模式：
pushOut：飛機被外力推出飛走。
popUp：飛機被彈射出去。
Shake模式
linearShake：飛機線型搖動。
rotateShake：飛機旋轉搖動。
其中，Flyout模式可以應用于登錄頁面，信息發送成功，如果填的信息有誤，可以使用Shake模式，代表信息輸入有誤。
JavaScript
你可以使用jQuery來觸發紙飛機的動畫，只需要在點擊按鈕或某類觸發事件時添加上面的相應class類即可。
$(document).ready(function() {
$('.animate').click(function(e) {
e.preventDefault();
$('#demo').addClass('flyaway popUp')
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function() {
$('#demo').removeClass('flyaway popUp');
});
});
});
關于作者
Flyaway.css是進擊的燊投稿發表的作品。他的個人聯系方式有：
(微博)：http://weibo.com/shenlu89dev
(githhub)：https://github.com/lushen
(Email)：shenlu89dev@gmail.com
(Linkedin)：https://www.linkedin.com/in/shen-lu-ba758567
Flyaway.css紙飛機特效的github地址為：https://github.com/lushen/flyaway/tree/master
來源：http://www.htmleaf.com/css3/css3donghua/201603053183.html