前端寫動畫，無非兩種方案，一種是通過css，另一種是js
css的方案：
1.transform的單獨使用 （ie9+）
rotate(90deg) 2d旋轉，也可以理解為沿著3d的z軸旋轉
rotatex(90deg) 沿著3d的x軸旋轉,同理還有rotatey rotatez
translate(100px, 50px) 沿著x方向 y方向移動100px, 50px
scale(2) 縮放 定義 2d 縮放轉換。
skew 斜切 沿著 x 和 y 軸的 2d 傾斜轉換 （平行四邊形、梯形的實現）
更詳細的transform屬性2.transition的單獨使用 （ie10及以上)
元素指定的屬性變化時，該屬性經過一段時間逐漸的過渡到最終需要的值
特點:需要事件(hover,focus,js)觸發，不能重複，不能定義中間狀態
四個屬性可以簡寫，如 transition: width 1s ease 0.2s
3.animation單獨使用 （ie10及以上)
六個屬性可以簡寫
transition和animation的差異:
1.transition動畫的執行過程就是宣告關鍵幀的過程，而animation動畫的事先宣告關鍵幀(@keyframes)，然後再呼叫關鍵幀
2.transition動畫的執行需要有事件(hover、點選事件)來驅動，而animation動畫的執行不一定需要驅動
animation與transform的混合應用demo：
position: absolute;
top: 10px;
left: 10px;
height: 80px;
}50%
}js的方案
1.settimeout/setinterval （不推薦）
2.requestanimationframe（相容性ie10以上）
關於requestanimationframe
window.requestanimationframe()接收乙個函式作為**，返回乙個id
window.cancelanimationframe()傳入id取消動畫
為什麼推薦使用requestanimationframe而不是settimeout/setinterval？
1.requestanimationframe 會把每一幀的所有dom操作集中起來，在一次重繪或回流中完成。且重繪或回流的時間間隔緊跟隨瀏覽器的重新整理頻率
3.在隱藏或不可見的元素中，requestanimationframe將不會重繪和回流，節省的cpu、gpu、記憶體使用
4.requestanimationframe是瀏覽器專為動畫提供的api，瀏覽器會自動優化方法的呼叫，若頁面不是啟用狀態，動畫自動暫停，節省cpu
最後的總結
1. 盡可能的使用css 關鍵幀動畫或者css transition。瀏覽器可以優化大量繪製和組合的時間。
2. 如果一定使用基於js的動畫，盡量使用requestanimationframe。盡量不要使用settimeout， setinterval。
3. 盡量不要在每一幀上改變inline元素，瀏覽器可以在多方面優化css中宣告式動畫。
4. 使用2d transforms來代替position:absolution將會顯著的提高fps（每秒傳輸幀數),因為2d transform有更少的繪製時間和更流暢的動畫。 通過改變元素top/left進行動畫，在每一幀內，cpu都需要計算該元素的其他樣式，特別是相對需要複雜計算的盒陰影，漸變，圓角等樣式，最後都需要將這些樣式應用到該元素內。從這個角度看，如果對於較為老舊的移動裝置進行相對複雜的動畫，那麼效果肯定不理想。
而通過呼叫translate，會啟動硬體加速，即在gpu層對該元素進行渲染。這樣，cpu就會相對解放出來進行其他的計算，gpu對樣式的計算相對較快，且保證較大的幀率。我們可以通過2d和3d的transform來啟用gpu計算。
5. chrome(版本69.0)可以通過timeline frams模式來觀測什麼讓你變慢
6.chrome(版本69.0)可以通過animations來對動畫進行微調
6.文章排版還有待加強
Web動畫 SVG 線條動畫入門
通常我們說的 web 動畫，包含了三大類。個人認為 3 種動畫各有優劣，實際應用中根據掌握情況作出取捨，本文討論的是我認為 svg 中在實際專案中非常有應用價值 svg 線條動畫。svg 線條動畫，在一些特定的場合下可以解決使用 css 無法完成的動畫。尤其是在進度條方面，看看最近專案裡的乙個小需求...
文字動畫效果小結
重所周知，在處理頁面的時候，動畫會給靜態頁面帶了一些生機，我們也會在製作頁面的時候考慮增加一些動畫效果，來增強頁面的使用者體驗。但是需要注意的是，不是所有的動畫都能增強使用者體驗，也需要慎重使用動畫。時刻牢記一條準則 要麼實用，要麼優雅，要麼死路一條！我在之前也對velocity.js這個動畫庫做過...
web安全小結
本文是對web中最常見漏洞的乙個小結，既然是web漏洞，那自然而然不能忽略了owasp top10了。最新版的owasp top10還是2017年公布的。如下 注入失效的身份認證 敏感資訊洩露 xml 外部實體 xxe 失效的訪問控制 安全配置錯誤 跨站指令碼 xss 不安全的反序列化 使用含有已知...