獻給前端求職路上的大家（上）

時間 2019-11-09

標籤獻給前端求職路上大家简体版

原文原文鏈接

（在放大鏡中尋找你）javascript

前言css

我是一名前端開發，從2016年6月畢業到現在步入工做，期間也面試了一些公司，參考過一些面試文檔，學習了一些面試寶典，掌握了一些面試、筆試技巧和經驗，因此就總結了一些優質的前端面試題以及面試要點，初學者閱後也要用心鑽研其中的原理，重要知識須要系統學習，透徹學習，才能造成本身的知識鏈，以不變應萬變，萬不可投機取巧，只求面試過關哦！html

面試注意點

面試題目：根據你的等級和職位變化，入門級到專家級：範圍↑、深度↑、方向↑、新技術↑。前端
題目類型：技術視野、項目細節、理論知識題，算法題，開放性題，案例題。html5
進行追問：能夠確保問到你開始不懂或面試官開始不懂爲止，這樣能夠大大延展題目的區分度和深度，知道你的實際能力。由於這種關聯知識是長時間的學習，絕對不是臨時抱佛腳得來的。java
言語態度：回答問題再棒，面試官（多是你的直接領導面試），會考慮我要不要這我的作個人同事？作個人員工？因此態度很重要。（感受更像是相親）git
硬知識才能：資深的工程師能把absolute和relative弄混，這樣的人不要也罷，由於團隊須要的你這我的具備能夠依靠的才能（靠譜）。github

前端開發面試知識點大綱

一、HTML&CSSweb

html:超級文本標記語言（HyperText Markup Language）面試
css:層疊樣式表(Cascading Style Sheets)對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、浮動和定位、選擇器優先級及使用、HTML五、CSS三、移動端適應

二、JavaScript

ECMAScript標準規範，描述這門語言的實現細節和標準。
基礎部分
數據類型、運算符、結構語句、面向對象、函數、正則表達式。
應用部分
window對象、document對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等

三、jQuery
對象的結構、jQuery的方法掛在哪裏、插件製做、jQuery的經常使用方法、選擇器、jQuery的事件用法

四、其餘

HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、後臺相關、編輯器和自動化工具、新技術、前端自動化、可維護、SEO、UED、架構、職業生涯等

必備知識點

做爲一名前端工程師，不管工做年頭長短都應該必須掌握的知識點：

DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
DOM操做 ——如何添加、移除、移動、複製、建立和查找節點等。
事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異,以及經常使用的事件委託。
XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型
塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
HTML與XHTML——兩者有什麼區別，你以爲應該使用哪個並說出理由。
JSON —— 做用、用途、設計結構。

備註：
根據本身須要選擇性閱讀，面試題是對理論知識的總結，讓本身學會應該如何表達。資料答案不夠正確和全面，歡迎補充答案、題目；最好是如今網上沒有的。格式不斷修改更新中。

HTML

WEB標準以及W3C標準是什麼?

標籤閉合、標籤小寫、不亂嵌套、使用外鏈css和js、結構行爲表現的分離。

xhtml和html有什麼區別?

一個是功能上的差異
主要是XHTML可兼容各大瀏覽器、手機以及PDA，而且瀏覽器也能快速正確地編譯網頁。
另外是書寫習慣的差異。
XHTML 元素必須被正確地嵌套，閉合，區分大小寫，文檔必須擁有根元素

Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔
嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。
在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。 DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素有什麼區別？

CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，好比div默認display屬性值爲「block」，成爲「塊級」元素； span默認display屬性值爲「inline」，是「行內」元素。
行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
知名的空元素：` <br> <hr> <img> <input> <link> <meta>
不爲人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
行內元素不能夠設置寬高，不獨佔一行;
塊級元素能夠設置寬高，獨佔一行。

link 和@import 的區別是？

link屬於XHTML標籤，而@import是CSS提供的;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題;
link方式的樣式的權重高於@import的權重。

瀏覽器的內核分別是什麼?

IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink。

常見兼容性問題？

png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8。
瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一,，可是全局效率很低，通常是以下這樣解決：

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
    margin:0;
    padding:0;
    }

IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。
浮動ie產生的雙倍距離#box{ float:left; width:10px; margin:0 0 0 100px;}這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)漸進識別的方式，從整體中逐漸排除局部。首先，巧妙的使用「9」這一標記，將IE遊覽器從全部狀況中分離出來。接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

css中存在的兼容問題

.bb{
      background-color:#f1ee18;/*全部識別*/
      .background-color:#00deff\9; /*IE六、七、8識別*/
      +background-color:#a200ff;/*IE六、7識別*/
      _background-color:#1e0bd1;/*IE6識別*/ 
    }

IE下,可使用獲取常規屬性的方法來獲取自定義屬性,也可使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.解決方法:統一經過getAttribute()獲取自定義屬性.
IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。
Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,可經過加入 CSS 屬性-webkit-text-size-adjust: none; 解決.超連接訪問事後hover樣式就不出現了被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務、畫布、強後臺相關技術等功能的增長。他的新的定義爲：一套新的javascriptAPI和若干小的對html結構的改動。
繪畫 canvas
用於媒介回放的 video 和 audio 元素。本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；sessionStorage 的數據在瀏覽器關閉後自動刪除。語意化更好的內容元素，好比 article、footer、header、nav、section。表單控件，calendar、date、time、email、url、search。新的技術webworker, websockt, Geolocation
移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；對可用性產生負面影響的元素：frame，frameset，noframes；支持HTML5新標籤：
IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式：
固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

語義化的理解？

用正確的標籤作正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

HTML5的離線儲存？

localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 數據在瀏覽器關閉後自動刪除。

(寫)描述一段語義的html代碼
（HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）就是基於語義化設計原則）

< div id="header"> 
    < h1>標題< /h1> 
    < h2>專一Web前端技術< /h2> 
 < /div>

iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；
*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript 動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會 sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

調用localstorge、cookies等本地存儲方式

webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基於 multipart 編碼發送 XHR 、基於長輪詢的 XHR

CSS

介紹一下CSS的盒子模型？

（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border).

CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = 「external」]）
9.僞類選擇器（a: hover, li: nth – child）

可繼承的樣式： font-size font-family color ul li dl dd dt;
不可繼承的樣式：border padding margin width height ;
優先級爲:
!important > id > class > tag
important 比內聯優先級高
優先級就近原則，同權重狀況下樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;

CSS3新增僞類舉例

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p>元素。
p:last-of-type 選擇屬於其父元素的最後<p> 元素的每一個 <p>元素。
p:only-of-type 選擇屬於其父元素惟一的<p> 元素的每一個 <p> 元素。
p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p>元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。

如何居中div？

// 給div設置一個寬度，而後添加margin:0 auto屬性
div{
  width:200px;
  margin:0 auto;
}

前端頁面由哪三層構成，分別是什麼？做用是什麼？

結構層 Html 表示層 CSS 行爲層 js

清除浮動的幾種方式，各自的優缺點

1.使用空標籤清除浮動clear:both（缺點，增長無心義的標籤,讓人感受很不爽）
2.使用overflow:auto（使用zoom:1用於兼容IE，缺點：內部寬高超過父級div時，會出現滾動條）
3.是用afert僞元素清除浮動(IE8以上和非IE瀏覽器才支持，目前：大型網站都有使用，如：騰迅，網易，新浪等等)

如何居中一個浮動元素？

1.肯定容器的寬高寬500 高 300 的層
2.設置層的外邊距

.div { 
  Width:500px ; 
 height:300px;//高度能夠不設
  Margin: -150px 0 0 -250px;
  position:relative;相對定位
  background-color:pink;//方便看效果
  left:50%;
  top:50%;
}

列出display的值，說明他們的做用。

block 象塊類型元素同樣顯示。
none 缺省值。象行內元素類型同樣顯示。
inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

position的值， relative和absolute定位原點是？

*absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
*fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。
*relative：生成相對定位的元素，相對於其正常位置進行定位。
static 默認值。沒有定位，元素出如今正常的流中
- （忽略 top, bottom, left, right z-index 聲明）。
- inherit 規定從父元素繼承 position 屬性的值。

CSS3有哪些新特性？

CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器多背景 rgba

爲何要初始化CSS樣式?

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。最簡單的初始化方法就是： {padding: 0; margin: 0;} （不建議）
淘寶的樣式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

absolute的containing block計算方式跟正常流有什麼不一樣？

position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

（他們之間優先級的關係）

綜上所述，一、能夠把它看做是一個相似優先級的機制， "position:absolute" 和 "position:fixed" 優先級最高，有它存在的時候，浮動不起做用，'display' 的值也須要調整；二、元素的 'float' 特性的值不是 "none" 的時候或者它是根元素的時候，調整 'display' 的值；三、非根元素，而且非浮動元素，而且非絕對定位的元素，'display' 特性值同設置值。

這從另外一個側面說明了一個問題：浮動或絕對定位的元素，只能是塊元素或表格。

對BFC規範的理解？

（W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其餘元素的關系和相互做用。）

使用 CSS 預處理器嗎？喜歡那個？

SASS、LESS

若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

display:inline-block 何時會顯示間隙？(攜程)

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

JavaScript

eval是作什麼的？

它的功能是把對應的字符串解析成JS代碼並運行；應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

null，undefined 的區別？

目前，null和undefined基本是同義的，只有一些細微的差異。
null表示"沒有對象"，即該處不該該有值。典型用法是：
（1）做爲函數的參數，表示該函數的參數不是對象。
（2）做爲對象原型鏈的終點。

Object.getPrototypeOf(Object.prototype)
// null

undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。典型用法是：
（1）變量被聲明瞭，但沒有賦值時，就等於undefined。
（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
（3）對象沒有賦值的屬性，該屬性的值爲undefined。
（4）函數沒有返回值時，默認返回undefined。

var i;
i // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
o.p // undefined

var x = f();
x // undefined

寫一個通用的事件偵聽器函數

// event(事件)工具集，來源：github.com/markyun
  markyun.Event = {
      // 頁面加載完成後
      readyEvent : function(fn) {
          if (fn==null) {
              fn=document;
          }
          var oldonload = window.onload;
          if (typeof window.onload != 'function') {
              window.onload = fn;
          } else {
              window.onload = function() {
                  oldonload();
                  fn();
              };
          }
      },
      // 視能力分別使用dom0||dom2||IE方式 來綁定事件
      // 參數： 操做的元素,事件名稱 ,事件處理程序
      addEvent : function(element, type, handler) {
          if (element.addEventListener) {
              //事件類型、須要執行的函數、是否捕捉
              element.addEventListener(type, handler, false);
          } else if (element.attachEvent) {
              element.attachEvent('on' + type, function() {
                  handler.call(element);
              });
          } else {
              element['on' + type] = handler;
          }
      },
      // 移除事件
      removeEvent : function(element, type, handler) {
          if (element.removeEnentListener) {
              element.removeEnentListener(type, handler, false);
          } else if (element.datachEvent) {
              element.detachEvent('on' + type, handler);
          } else {
              element['on' + type] = null;
          }
      }, 
      // 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)
      stopPropagation : function(ev) {
          if (ev.stopPropagation) {
              ev.stopPropagation();
          } else {
              ev.cancelBubble = true;
          }
      },
      // 取消事件的默認行爲
      preventDefault : function(event) {
          if (event.preventDefault) {
              event.preventDefault();
          } else {
              event.returnValue = false;
          }
      },
      // 獲取事件目標
      getTarget : function(event) {
          return event.target || event.srcElement;
      },
      // 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；
      getEvent : function(e) {
          var ev = e || window.event;
          if (!ev) {
              var c = this.getEvent.caller;
              while (c) {
                  ev = c.arguments[0];
                  if (ev && Event == ev.constructor) {
                      break;
                  }
                  c = c.caller;
              }
          }
          return ev;
      }
  };

Node.js的適用場景？

高併發、聊天、實時消息推送

介紹js的基本數據類型

number,string,boolean,object,undefined

Javascript如何實現繼承？

經過原型和構造器

[「1″, 「2」, 「3」].map(parseInt) 答案是多少？

[1, NaN, NaN] 由於 parseInt 須要兩個參數 (val, radix)，其中 radix 表示解析時用的基數。map 傳了 3 個 (element, index, array)，對應的 radix 不合法致使解析失敗。

註明：今天先更新到這裏，有一些問題沒有給出答案提示，你們能夠先自行思考一下，明天會繼續更面試要點，期待你的到來！真心但願這些知識點能夠幫到有須要的人。

注：原文有較大改動

使用 keyframes, animation屬性，例如timing, delay,play state, animation-count, iteration count, direction,fill mode以及will-change等等創造動畫魔法
做爲設計者、開發人員，除去精簡的用戶界面，更好的頁面加載速度外，咱們發現經過給界面添加動畫效果，能夠增長用戶與網站的互動率，可以更好的吸引用戶使用咱們的產品。CSS3 相對於原先的基於 JavaScript 操做 Dom 實現動畫的方式而已，CSS現在擁有更好的兼容性。因此本文就介紹CSS動畫的一些基本知識。

keyframes

經過逐漸改變對象的運動狀態的方式，咱們能夠將動畫應用到到頁面上的任何對象上。然而利用keyframes特性，咱們即可以控制動畫對象每一階段的狀態。

@keyframes pulse {
0% {

transform: scale3d(1, 1, 1);

}
50%{

transform: scale3d(1.1, 1.1, 1.1);

}
100% {

transform: scale3d(1, 1, 1);

}
}
咱們嘗試思考如下這個例子:

動畫名（Animation name): pulse
3個步驟：0%（state time), 50%（x time）, 100% （end time）
CSS值：scale3d(x, y, z)

當動畫已經在(@keyframes)中定義好後，咱們能夠控制如下幾樣東西：

動畫的持續時間
延遲多久動畫開始
動畫的重複頻率
動畫的方向
如下是實現示例：

button {
animation-duration: 1s;
animation-name: pulse;
}
在以上示例中，咱們給一個Button添加了動畫 pulse，定義了持續時長(duration)爲1秒。若是咱們調整了這個持續時長屬性的值，則能夠看到這個Button就會出現一個還不錯的效果。如圖：

Demo地址：http://codepen.io/phyesix/pen...

1.動畫時間（Animation Timing)

動畫時間函數是用於決定咱們但願動畫在移動週期內要進行加速和減速效果的時間。因此，爲了實現這個效果，咱們須要定義動畫將要移動的速度。這裏有一些咱們常見的動畫時間屬性的選項值，例如：initial,inherit, ease, ease-in, ease-out, 還有linear等等。

引用：https://i.stack.imgur.com/

動畫時間函數：左（ease）右（linear）以上的選項是很直接的調整動畫的方法。然而經過自定義貝塞爾曲線的值，能夠知足你具體的動畫時間需求。

關於如何使用貝塞爾曲線的方法咱們能夠經過查看Mozilla的開發者網站

2.動畫延時（Animation Delay）

動畫延時經常應用於當咱們須要對動畫進行的延時操做的時候。即當某個動畫被觸發了，而後延時1S後開始執行。例如：咱們對「Send FeedBack"按鈕添加了延時處理：

動畫延時：左(1秒), 右(2秒)

3.動畫播放狀態（Animation Play State）

動畫播放狀態經常用來控制動畫是否須要暫停或者繼續。

運行（running)：動畫繼續
暫停（paused）: 動畫中止

Demo地址：http://codepen.io/phyesix/pen...

4.動畫的循環次數

循環次數指單位時間內，動畫所重複執行的次數。

無限(infinite)：無限循環
指定值(x)：動畫重複x次
繼承(inherit)：繼承父級的循環次數

Demo地址：http://codepen.io/phyesix/pen...

5.動畫方向（Animation Direction）

動畫方向是用於指定動畫對象的移動方向。例如是從尺寸0%到100%，仍是從100%到%0，又或者是從0%到100%的大小，而後反轉從100%到0%。

順序的(Normal): 指動畫從0%到100%順序執行
倒序(Reverse): 動畫從100%做爲起點位置開始到0%倒序執行
交替(Alernate): 動畫先從0%變化到100%，而後從100%返回到0%
反轉-交替(Alternate-reverse): 動畫從100%到0%倒序，而後又從0%前進到100%正序執行

Demo地址：http://codepen.io/phyesix/pen...

6.動畫填充模式（Animation Fill Mode）

咱們須要知道，當動畫執行結束後，在動畫執行期間給對象元素所添加的樣式並非永久的。這個樣式僅僅是在動畫期間被應用而後即被移除。關於動畫應用的模式，咱們可使用如下屬性值來表示：

向後（Backward）: 在動畫處於0%時，樣式會被應用到元素上
向前（Forward）: 在動畫處於100%時，樣式會被應用到元素上
兼得（Both): 在動畫開始和結束時樣式會被應用
初始值（Initial): 設置這個屬性爲默認值

Demo地址：http://codepen.io/phyesix/pen...

7.將要改變（Will-Change）

很是感謝 Will-Change 特性。能夠經過 Will-Change 屬性，咱們能夠在動畫執行前，提早通知瀏覽器上咱們將要執行動畫的對象元素。這就容許了咱們能夠一次性的對元素的多個屬性進行動畫操做。從而減小大部分動畫執行期間潛在的性能損耗問題。

button {
will-change: transform, opacity;
}
下面的代碼我聲明瞭將會對全部元素的全部屬性執行動畫，即便是非動畫區域。

, ::before, *::after {