資訊專欄INFORMATION COLUMN
摘要：事件如何使用事件，以及和標準事件模型之間存在的差別以及常用的事件委托。模擬老式瀏覽器的行為以防止站點無法工作。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權(quán)重，利于。
（在放大鏡中尋找你）
前言
面試注意點我是一名前端開發(fā)，從2016年6月畢業(yè)到如今步入工作，期間也面試了一些公司，參考過一些面試文檔，學習了一些面試寶典，掌握了一些面試、筆試技巧和經(jīng)驗，所以就總結(jié)了一些優(yōu)質(zhì)的前端面試題以及面試要點，初學者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學習，透徹學習，才能形成自己的知識鏈，以不變應萬變，萬不可投機取巧，只求面試過關哦！
面試題目： 根據(jù)你的等級和職位變化，入門級到專家級：范圍↑、深度↑、方向↑、新技術↑。
題目類型： 技術視野、項目細節(jié)、理論知識題，算法題，開放性題，案例題。
進行追問： 可以確保問到你開始不懂或面試官開始不懂為止，這樣可以大大延展題目的區(qū)分度和深度，知道你的實際能力。因為這種關聯(lián)知識是長時間的學習，絕對不是臨時抱佛腳得來的。
言語態(tài)度：回答問題再棒，面試官（可能是你的直接領導面試），會考慮我要不要這個人做我的同事？做我的員工？所以態(tài)度很重要。（感覺更像是相親）
硬知識才能：資深的工程師能把absolute和relative弄混，這樣的人不要也罷，因為團隊需要的你這個人具有可以依靠的才能（靠譜）。
前端開發(fā)面試知識點大綱1、HTML&CSS
html:超級文本標記語言（HyperText Markup Language）
css:層疊樣式表(Cascading Style Sheets)對Web標準的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功：布局、盒子模型、浮動和定位、選擇器優(yōu)先級及使用、HTML5、CSS3、移動端適應
2、JavaScript
ECMAScript標準規(guī)范，描述這門語言的實現(xiàn)細節(jié)和標準。
基礎部分
數(shù)據(jù)類型、運算符、結(jié)構(gòu)語句、面向?qū)ο蟆⒑瘮?shù)、正則表達式。
應用部分
window對象、document對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內(nèi)存泄漏、事件機制、異步裝載回調(diào)、模板引擎、Nodejs、JSON、ajax等
3、jQuery
對象的結(jié)構(gòu)、jQuery的方法掛在哪里、插件制作、jQuery的常用方法、選擇器、jQuery的事件用法
4、其他
HTTP、安全、正則、優(yōu)化、重構(gòu)、響應式、移動端、團隊協(xié)作、后臺相關、編輯器和自動化工具、新技術、前端自動化、可維護、SEO、UED、架構(gòu)、職業(yè)生涯等
必備知識點作為一名前端工程師，無論工作年頭長短都應該必須掌握的知識點：
DOM結(jié)構(gòu) —— 兩個節(jié)點之間可能存在哪些關系以及如何在節(jié)點之間任意移動。
DOM操作 ——如何添加、移除、移動、復制、創(chuàng)建和查找節(jié)點等。
事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別,以及常用的事件委托。
XMLHttpRequest —— 這是什么、怎樣完整地執(zhí)行一次GET請求、怎樣檢測錯誤。
嚴格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區(qū)分它們有何意義。
盒模型 —— 外邊距、內(nèi)邊距和邊框之間的關系，及IE8以下版本的瀏覽器中的盒模型
塊級元素與行內(nèi)元素 —— 怎么用CSS控制它們、以及如何合理的使用它們
浮動元素——怎么使用它們、它們有什么問題以及怎么解決這些問題。
HTML與XHTML——二者有什么區(qū)別，你覺得應該使用哪一個并說出理由。
JSON —— 作用、用途、設計結(jié)構(gòu)。
備注：
根據(jù)自己需要選擇性閱讀，面試題是對理論知識的總結(jié)，讓自己學會應該如何表達。資料答案不夠正確和全面，歡迎補充答案、題目；最好是現(xiàn)在網(wǎng)上沒有的。格式不斷修改更新中。
WEB標準以及W3C標準是什么?HTML
標簽閉合、標簽小寫、不亂嵌套、使用外鏈css和js、結(jié)構(gòu)行為表現(xiàn)的分離。
一個是功能上的差別
主要是XHTML可兼容各大瀏覽器、手機以及PDA，并且瀏覽器也能快速正確地編譯網(wǎng)頁。
另外是書寫習慣的差別。
XHTML 元素必須被正確地嵌套，閉合，區(qū)分大小寫，文檔必須擁有根元素
聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器的解析器， 用什么文檔類型 規(guī)范來解析這個文檔
嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。 DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現(xiàn)。
行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行內(nèi)元素和塊級元素有什么區(qū)別？CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值， 比如div默認display屬性值為“block”，成為“塊級”元素； span默認display屬性值為“inline”，是“行內(nèi)”元素。
行內(nèi)元素有：a b span img input select strong（強調(diào)的語氣）
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
知名的空元素：`
鮮為人知的是：
行內(nèi)元素不可以設置寬高，不獨占一行;
塊級元素可以設置寬高，獨占一行。
link 和@import 的區(qū)別是？link屬于XHTML標簽，而@import是CSS提供的;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題;
link方式的樣式的權(quán)重 高于@import的權(quán)重。
瀏覽器的內(nèi)核分別是什么?IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內(nèi)核原為Presto，現(xiàn)為Blink。
png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8。
瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一,，但是全局效率很低，一般是如下這樣解決：
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產(chǎn)生的雙倍距離#box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE游覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。
css中存在的兼容問題
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。
Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性-webkit-text-size-adjust: none;?解決.超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務、畫布、強后臺相關技術等功能的增加。他的新的定義為：一套新的javascriptAPI和若干小的對html結(jié)構(gòu)的改動。
繪畫 canvas
用于媒介回放的 video 和 audio 元素。本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失；sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除。語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section。表單控件，calendar、date、time、email、url、search。新的技術webworker, websockt, Geolocation
移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；支持HTML5新標簽：
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式：
當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
語義化的理解？用正確的標簽做正確的事情！
html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；
在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。
搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權(quán)重，利于 SEO。
使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。
HTML5的離線儲存？localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失；
sessionStorage 數(shù)據(jù)在瀏覽器關閉后自動刪除。
(寫)描述一段語義的html代碼
（HTML5中新增加的很多標簽（如：
< div id="header">
< h1>標題< /h1>
< h2>專注Web前端技術< /h2>
< /div>
iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript 動態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。
請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？cookie在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會 sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信? (阿里)調(diào)用localstorge、cookies等本地存儲方式
webSocket如何兼容低瀏覽器？(阿里)Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發(fā)送 XHR 、 基于長輪詢的 XHR
介紹一下CSS的盒子模型？CSS
（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型： 內(nèi)容(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 ;
優(yōu)先級為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高
優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準;
載入樣式以最后載入的定位為準;
CSS3新增偽類舉例p:first-of-type 選擇屬于其父元素的首個?
元素的每個
元素。
p:last-of-type 選擇屬于其父元素的最后
元素的每個
元素。
p:only-of-type 選擇屬于其父元素唯一的
元素的每個
?元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個
元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個
?元素。
:enabled :disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復選框被選中。
如何居中div？// 給div設置一個寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
前端頁面由哪三層構(gòu)成，分別是什么？作用是什么？
結(jié)構(gòu)層 Html 表示層 CSS 行為層 js
清除浮動的幾種方式，各自的優(yōu)缺點1.使用空標簽清除浮動clear:both（缺點，增加無意義的標簽,讓人感覺很不爽）
2.使用overflow:auto（使用zoom:1用于兼容IE，缺點：內(nèi)部寬高超過父級div時，會出現(xiàn)滾動條）
3.是用afert偽元素清除浮動(IE8以上和非IE瀏覽器才支持，目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等)
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 缺省值。象行內(nèi)元素類型一樣顯示。
inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
position的值， relative和absolute定位原點是？*absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
*fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。
*relative：生成相對定位的元素，相對于其正常位置進行定位。
static 默認值。沒有定位，元素出現(xiàn)在正常的流中
（忽略 top, bottom, left, right z-index 聲明）。
inherit 規(guī)定從父元素繼承 position 屬性的值。
CSS3有哪些新特性？CSS3實現(xiàn)圓角（border-radius:8px），陰影（box-shadow:10px），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對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這些特性相互疊加后會怎么樣？
（他們之間優(yōu)先級的關系）
綜上所述，1、可以把它看作是一個類似優(yōu)先級的機制， "position:absolute" 和 "position:fixed" 優(yōu)先級最高，有它存在的時候，浮動不起作用，"display" 的值也需要調(diào)整； 2、元素的 "float" 特性的值不是 "none" 的時候或者它是根元素的時候，調(diào)整 "display" 的值； 3、非根元素，并且非浮動元素，并且非絕對定位的元素，"display" 特性值同設置值。
這從另一個側(cè)面說明了一個問題：浮動或絕對定位的元素，只能是塊元素或表格。
對BFC規(guī)范的理解？（W3C CSS 2.1 規(guī)范中的一個概念,它決定了元素如何對其內(nèi)容進行定位,以及與其他元素的關 系和相互作用。）
使用 CSS 預處理器嗎？喜歡那個？SASS、LESS
如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）多數(shù)顯示器默認頻率是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語句，一次執(zhí)行）。
null，undefined 的區(qū)別？目前，null和undefined基本是同義的，只有一些細微的差別。
null表示"沒有對象"，即該處不應該有值。典型用法是：
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。
（2） 作為對象原型鏈的終點。
Object.getPrototypeOf(Object.prototype) // null
undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：
（1）變量被聲明了，但沒有賦值時，就等于undefined。
（2) 調(diào)用函數(shù)時，應該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
（3）對象沒有賦值的屬性，該屬性的值為undefined。
（4）函數(shù)沒有返回值時，默認返回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
寫一個通用的事件偵聽器函數(shù)
// 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方式 來綁定事件
// 參數(shù)： 操作的元素,事件名稱 ,事件處理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件類型、需要執(zhí)行的函數(shù)、是否捕捉
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的適用場景？
高并發(fā)、聊天、實時消息推送
介紹js的基本數(shù)據(jù)類型number,string,boolean,object,undefined
Javascript如何實現(xiàn)繼承？通過原型和構(gòu)造器
[“1″, “2”, “3”].map(parseInt) 答案是多少？[1, NaN, NaN] 因為 parseInt 需要兩個參數(shù) (val, radix)，其中 radix 表示解析時用的基數(shù)。map 傳了 3 個 (element, index, array)，對應的 radix 不合法導致解析失敗。
注明：今天先更新到這里，有一些問題沒有給出答案提示，大家可以先自行思考一下，明天會繼續(xù)更面試要點，期待你的到來！真心希望這些知識點可以幫到有需要的人。
注：原文有較大改動
使用 keyframes, animation屬性，例如timing, delay,play state, animation-count, iteration count, direction,fill mode以及will-change等等 創(chuàng)造動畫魔法
作為設計者、開發(fā)人員，除去精簡的用戶界面，更好的頁面加載速度外，我們發(fā)現(xiàn)通過給界面添加動畫效果，可以增加用戶與網(wǎng)站的互動率，能夠更好的吸引用戶使用我們的產(chǎn)品。CSS3 相對于原先的基于 JavaScript 操作 Dom 實現(xiàn)動畫的方式而已，CSS如今擁有更好的兼容性。所以本文就介紹CSS動畫的一些基本知識。
keyframes
通過逐漸改變對象的運動狀態(tài)的方式，我們可以將動畫應用到到頁面上的任何對象上。然而利用keyframes特性，我們便可以控制動畫對象每一階段的狀態(tài)。
@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)
當動畫已經(jīng)在(@keyframes)中定義好后，我們可以控制以下幾樣東西：
動畫的持續(xù)時間
延遲多久動畫開始
動畫的重復頻率
動畫的方向
以下是實現(xiàn)示例：
button {
animation-duration: 1s;
animation-name: pulse;
}
在以上示例中，我們給一個Button添加了動畫 pulse，定義了持續(xù)時長(duration)為1秒。 如果我們調(diào)整了這個持續(xù)時長屬性的值，則可以看到這個Button就會出現(xiàn)一個還不錯的效果。如圖：
Demo地址：http://codepen.io/phyesix/pen...
1.動畫時間（Animation Timing)
動畫時間函數(shù)是用于決定我們希望動畫在移動周期內(nèi)要進行加速和減速效果的時間。所以，為了實現(xiàn)這個效果，我們需要定義動畫將要移動的速度。這里有一些我們常見的動畫時間屬性的選項值，例如：initial,inherit, ease, ease-in, ease-out, 還有l(wèi)inear等等。
引用：https://i.stack.imgur.com/
動畫時間函數(shù)：左（ease）右（linear） 以上的選項是很直接的調(diào)整動畫的方法。然而通過自定義貝塞爾曲線的值，可以滿足你具體的動畫時間需求。
關于如何使用貝塞爾曲線的方法我們可以通過查看Mozilla的開發(fā)者網(wǎng)站
2.動畫延時 （Animation Delay）
動畫延時常常應用于當我們需要對動畫進行的延時操作的時候。即當某個動畫被觸發(fā)了，然后延時1S后開始執(zhí)行。例如： 我們對“Send FeedBack"按鈕添加了延時處理：
動畫延時：左(1秒), 右(2秒)
3.動畫播放狀態(tài)（Animation Play State）
動畫播放狀態(tài)常常用來控制動畫是否需要暫停或者繼續(xù)。
運行（running)： 動畫繼續(xù)
暫停（paused）: 動畫停止
Demo地址：http://codepen.io/phyesix/pen...
4.動畫的循環(huán)次數(shù)
循環(huán)次數(shù)指單位時間內(nèi)，動畫所重復執(zhí)行的次數(shù)。
無限(infinite)：無限循環(huán)
指定值(x)：動畫重復x次
繼承(inherit)：繼承父級的循環(huán)次數(shù)
Demo地址：http://codepen.io/phyesix/pen...
5.動畫方向（Animation Direction）
動畫方向是用于指定動畫對象的移動方向。例如是從尺寸0%到100%，還是從100%到%0，又或者是從0%到100%的大小，然后反轉(zhuǎn)從100%到0%。
順序的(Normal): 指動畫從0%到100%順序執(zhí)行
倒序(Reverse): 動畫從100%作為起點位置開始到0%倒序執(zhí)行
交替(Alernate): 動畫先從0%變化到100%，然后從100%返回到0%
反轉(zhuǎn)-交替(Alternate-reverse): 動畫從100%到0%倒序， 然后又從0%前進到100%正序執(zhí)行
Demo地址：http://codepen.io/phyesix/pen...
6.動畫填充模式（Animation Fill Mode）
我們需要知道，當動畫執(zhí)行結(jié)束后，在動畫執(zhí)行期間給對象元素所添加的樣式并不是永久的。這個樣式僅僅是在動畫期間被應用然后即被移除。關于動畫應用的模式，我們可以使用以下屬性值來表示：
向后（Backward）: 在動畫處于0%時，樣式會被應用到元素上
向前（Forward）: 在動畫處于100%時，樣式會被應用到元素上
兼得（Both): 在動畫開始和結(jié)束時樣式會被應用
初始值（Initial): 設置這個屬性為默認值
Demo地址：http://codepen.io/phyesix/pen...
7.將要改變（Will-Change）
非常感謝 Will-Change 特性。可以通過 Will-Change 屬性，我們可以在動畫執(zhí)行前，提前通知瀏覽器上我們將要執(zhí)行動畫的對象元素。這就允許了我們可以一次性的對元素的多個屬性進行動畫操作。從而減少大部分動畫執(zhí)行期間潛在的性能損耗問題。
button {
will-change: transform, opacity;
}
下面的代碼我聲明了將會對所有元素的所有屬性執(zhí)行動畫，即使是非動畫區(qū)域。
, ::before, *::after {
will-change: all
}
很顯然，上面的這種使用方法會帶來一些沒有必要的系統(tǒng)資源的占用和性能損耗。 所以，我們應該盡可能在所需要的元素上使用CSS動畫。更多關于 Will-Change 的特性的信息請看：https://dev.opera.com/article...
4個超級屬性
在keyframes里，我們幾乎可以使用任何的CSS屬性。在如今的大部分瀏覽器中，你可以放心的使用 position, scale, rotation, opacity 等等屬性值。并且這4個屬性可以給動畫效果帶來更高效，更好的性能表現(xiàn)。
引用：https://www.html5rocks.com/en...
結(jié)語
以上列舉的都是些實現(xiàn)CSS動畫的基本屬性，一旦了解了這些基礎，從而更方便的開始進行動畫創(chuàng)作。 關于很多你可能感興趣的CSS動畫應用和實例資源，可以查看Codepen的CSS動畫單元。
翻譯地址：http://imziv.com/blog/article...
原文鏈接：https://stories.jotform.com/h...
本文原文：http://div.io/topic/1932
好了，下面是廣告時間。前端學習群，入群即送學習資料。現(xiàn)在還不滿，從速哦！入群加笑笑微信：iamaixiaoxiao。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86860.html
摘要：一般情況下是全局對象。是可以被偵測到的行為。顧名思義，這種模式使得在更嚴格的條件下運行。安全問題暴露了與服務器交互的細節(jié)。破壞了程序的異常機制。避免使用表達式又稱動態(tài)屬性。用于表示請求成功。 注明：上一篇獻給前端求職路上的你們（上),主要側(cè)重說的是前端面試中的html和css這兩塊常見問題，這是基礎，其實在真正面試中，面試官往往采用的是由難到易的套路，那js和jQuery就是重中之重了...
摘要：一般情況下是全局對象。是可以被偵測到的行為。顧名思義，這種模式使得在更嚴格的條件下運行。安全問題暴露了與服務器交互的細節(jié)。破壞了程序的異常機制。避免使用表達式又稱動態(tài)屬性。用于表示請求成功。 注明：上一篇獻給前端求職路上的你們（上),主要側(cè)重說的是前端面試中的html和css這兩塊常見問題，這是基礎，其實在真正面試中，面試官往往采用的是由難到易的套路，那js和jQuery就是重中之重了...
摘要：事件如何使用事件，以及和標準事件模型之間存在的差別以及常用的事件委托。模擬老式瀏覽器的行為以防止站點無法工作。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權(quán)重，利于。 showImg(https://segmentfault.com/img/remote/1460000008630900); （在放大鏡中尋找你） 前言 我是...
摘要：事件如何使用事件，以及和標準事件模型之間存在的差別以及常用的事件委托。模擬老式瀏覽器的行為以防止站點無法工作。首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權(quán)重，利于。 showImg(https://segmentfault.com/img/remote/1460000008630900); （在放大鏡中尋找你） 前言 我是...
閱讀 2784·2023-04-25 18:06
閱讀 2576·2021-11-22 09:34
閱讀 1684·2021-11-08 13:16
閱讀 1302·2021-09-24 09:47
閱讀 3049·2019-08-30 15:44
閱讀 2773·2019-08-29 17:24
閱讀 2584·2019-08-23 18:37
閱讀 2433·2019-08-23 16:55
