資訊專欄INFORMATION COLUMN
摘要：事件如何使用事件，以及和標準事件模型之間存在的差別以及常用的事件委托。模擬老式瀏覽器的行為以防止站點無法工作。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于。
（在放大鏡中尋找你）
前言
面試注意點我是一名前端開發，從2016年6月畢業到如今步入工作，期間也面試了一些公司，參考過一些面試文檔，學習了一些面試寶典，掌握了一些面試、筆試技巧和經驗，所以就總結了一些優質的前端面試題以及面試要點，初學者閱后也要用心鉆研其中的原理，重要知識需要系統學習，透徹學習，才能形成自己的知識鏈，以不變應萬變，萬不可投機取巧，只求面試過關哦！
面試題目： 根據你的等級和職位變化，入門級到專家級：范圍↑、深度↑、方向↑、新技術↑。
題目類型： 技術視野、項目細節、理論知識題，算法題，開放性題，案例題。
進行追問： 可以確保問到你開始不懂或面試官開始不懂為止，這樣可以大大延展題目的區分度和深度，知道你的實際能力。因為這種關聯知識是長時間的學習，絕對不是臨時抱佛腳得來的。
言語態度：回答問題再棒，面試官（可能是你的直接領導面試），會考慮我要不要這個人做我的同事？做我的員工？所以態度很重要。（感覺更像是相親）
硬知識才能：資深的工程師能把absolute和relative弄混，這樣的人不要也罷，因為團隊需要的你這個人具有可以依靠的才能（靠譜）。
前端開發面試知識點大綱1、HTML&CSS
html:超級文本標記語言（HyperText Markup Language）
css:層疊樣式表(Cascading Style Sheets)對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：布局、盒子模型、浮動和定位、選擇器優先級及使用、HTML5、CSS3、移動端適應
2、JavaScript
ECMAScript標準規范，描述這門語言的實現細節和標準。
基礎部分
數據類型、運算符、結構語句、面向對象、函數、正則表達式。
應用部分
window對象、document對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等
3、jQuery
對象的結構、jQuery的方法掛在哪里、插件制作、jQuery的常用方法、選擇器、jQuery的事件用法
4、其他
HTTP、安全、正則、優化、重構、響應式、移動端、團隊協作、后臺相關、編輯器和自動化工具、新技術、前端自動化、可維護、SEO、UED、架構、職業生涯等
必備知識點作為一名前端工程師，無論工作年頭長短都應該必須掌握的知識點：
DOM結構 —— 兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
DOM操作 ——如何添加、移除、移動、復制、創建和查找節點等。
事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別,以及常用的事件委托。
XMLHttpRequest —— 這是什么、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
盒模型 —— 外邊距、內邊距和邊框之間的關系，及IE8以下版本的瀏覽器中的盒模型
塊級元素與行內元素 —— 怎么用CSS控制它們、以及如何合理的使用它們
浮動元素——怎么使用它們、它們有什么問題以及怎么解決這些問題。
HTML與XHTML——二者有什么區別，你覺得應該使用哪一個并說出理由。
JSON —— 作用、用途、設計結構。
備注：
根據自己需要選擇性閱讀，面試題是對理論知識的總結，讓自己學會應該如何表達。資料答案不夠正確和全面，歡迎補充答案、題目；最好是現在網上沒有的。格式不斷修改更新中。
WEB標準以及W3C標準是什么?HTML
標簽閉合、標簽小寫、不亂嵌套、使用外鏈css和js、結構行為表現的分離。
一個是功能上的差別
主要是XHTML可兼容各大瀏覽器、手機以及PDA，并且瀏覽器也能快速正確地編譯網頁。
另外是書寫習慣的差別。
XHTML 元素必須被正確地嵌套，閉合，區分大小寫，文檔必須擁有根元素
聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器的解析器， 用什么文檔類型 規范來解析這個文檔
嚴格模式的排版和 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
知名的空元素：`
鮮為人知的是：
行內元素不可以設置寬高，不獨占一行;
塊級元素可以設置寬高，獨占一行。
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和IE7、IE6分離開來，這樣IE8已經獨立識別。
css中存在的兼容問題
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、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中新增加的很多標簽（如：
< 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).
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:last-of-type 選擇屬于其父元素的最后
元素的每個
元素。
p:only-of-type 選擇屬于其父元素唯一的
元素的每個
?元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個
元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個
?元素。
: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初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對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, 5b8b4f53; }
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這些特性相互疊加后會怎么樣？
（他們之間優先級的關系）
綜上所述，1、可以把它看作是一個類似優先級的機制， "position:absolute" 和 "position:fixed" 優先級最高，有它存在的時候，浮動不起作用，"display" 的值也需要調整； 2、元素的 "float" 特性的值不是 "none" 的時候或者它是根元素的時候，調整 "display" 的值； 3、非根元素，并且非浮動元素，并且非絕對定位的元素，"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
eval是做什么的？JavaScript
它的功能是把對應的字符串解析成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 {
will-change: all
}
很顯然，上面的這種使用方法會帶來一些沒有必要的系統資源的占用和性能損耗。 所以，我們應該盡可能在所需要的元素上使用CSS動畫。更多關于 Will-Change 的特性的信息請看：https://dev.opera.com/article...
4個超級屬性
在keyframes里，我們幾乎可以使用任何的CSS屬性。在如今的大部分瀏覽器中，你可以放心的使用 position, scale, rotation, opacity 等等屬性值。并且這4個屬性可以給動畫效果帶來更高效，更好的性能表現。
引用：https://www.html5rocks.com/en...
結語
以上列舉的都是些實現CSS動畫的基本屬性，一旦了解了這些基礎，從而更方便的開始進行動畫創作。 關于很多你可能感興趣的CSS動畫應用和實例資源，可以查看Codepen的CSS動畫單元。
翻譯地址：http://imziv.com/blog/article...
原文鏈接：https://stories.jotform.com/h...
本文原文：http://div.io/topic/1932
好了，下面是廣告時間。前端學習群，入群即送學習資料。現在還不滿，從速哦！入群加笑笑微信：iamaixiaoxiao。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50524.html
摘要：一般情況下是全局對象。是可以被偵測到的行為。顧名思義，這種模式使得在更嚴格的條件下運行。安全問題暴露了與服務器交互的細節。破壞了程序的異常機制。避免使用表達式又稱動態屬性。用于表示請求成功。 注明：上一篇獻給前端求職路上的你們（上),主要側重說的是前端面試中的html和css這兩塊常見問題，這是基礎，其實在真正面試中，面試官往往采用的是由難到易的套路，那js和jQuery就是重中之重了...
摘要：一般情況下是全局對象。是可以被偵測到的行為。顧名思義，這種模式使得在更嚴格的條件下運行。安全問題暴露了與服務器交互的細節。破壞了程序的異常機制。避免使用表達式又稱動態屬性。用于表示請求成功。 注明：上一篇獻給前端求職路上的你們（上),主要側重說的是前端面試中的html和css這兩塊常見問題，這是基礎，其實在真正面試中，面試官往往采用的是由難到易的套路，那js和jQuery就是重中之重了...
摘要：事件如何使用事件，以及和標準事件模型之間存在的差別以及常用的事件委托。模擬老式瀏覽器的行為以防止站點無法工作。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于。 showImg(https://segmentfault.com/img/remote/1460000008630900); （在放大鏡中尋找你） 前言 我是...
摘要：事件如何使用事件，以及和標準事件模型之間存在的差別以及常用的事件委托。模擬老式瀏覽器的行為以防止站點無法工作。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于。 showImg(https://segmentfault.com/img/remote/1460000008630900); （在放大鏡中尋找你） 前言 我是...
閱讀 2954·2021-11-17 09:33
閱讀 3118·2021-11-16 11:52
閱讀 482·2021-09-26 09:55
閱讀 2975·2019-08-30 15:52
閱讀 1313·2019-08-30 15:44
閱讀 1257·2019-08-30 13:59
閱讀 796·2019-08-30 13:08
閱讀 1157·2019-08-30 10:50
