問題描述：
產生條件：
在360安全瀏覽器/360極速瀏覽器（npapi插件開啟）
CSS3動畫及flash 共存
上述條件同時符合的場景下，在某個flash播放的時候，觸發任意一個帶有CSS3動畫的元素，會發現flash消失，待CSS3動畫播放完畢之后重新出現，如果頁面比較復雜時會發現其它文本元素也會有閃動現象。（此時需要的字體飽和度（hsla中的s）較高，這樣肉眼能夠清晰的看到字體閃動。）
環境準備：
1，打開360安全瀏覽器【其它主流瀏覽器非NPAPI】
?2. ?先看下是否use npapi?
? ? ? ?? ? ?方法: ?在地址欄輸入 ?se://plugins ?如圖查看是否開啟
場景帶入：
感謝文章CSS3硬件加速，硬件加速的方式，會把需要渲染的元素放到特定的復合層（composited layer）中，如果你想查看你的頁面是否使用了2D或者3D加速，可以用下列方式去查看。
在控制臺可以這樣開啟：【我以360安全瀏覽器為例】
勾選Show composited layer borders以后，就能看到有動畫3d/2d變換的元素會被一個黃色的邊框圈起來，表示放到了一個新的 "復合層（composited layer）" 中渲染，大概長這個樣子：
藍色的細線是瀏覽器渲染時候的瓦片，瀏覽器繪制頁面的時候只會繪制可視區域一定范圍內的瓦片，以節省性能開銷，而黃色的邊框框起來的，就代表了這個元素被放到特殊的復合層中渲染，跟主文檔不在一個層中，但其實我只有其中的幾處使用了2D動畫，但顯然很多并不會涉及的容器也被黃色的邊框框了起來，經過排查發現，是因為CSS3動畫【這兒要說一下動畫包括 transform 和 animation, 不論是@keyframes 還是簡單的 translate rotate ... 】導致之后所有絕對相對定位的元素都被放到復合層中渲染。
查了一些?資料：
層創建標準什么情況下能使元素獲得自己的層？滿足以下任意情況便會創建層：
3D 或透視變換(perspective transform) CSS 屬性
使用加速視頻解碼的 元素
擁有 3D (WebGL) 上下文或加速的 2D 上下文的 元素
混合插件(如 Flash)
對自己的 opacity 做 CSS 動畫或使用一個動畫 webkit 變換的元素
擁有加速 CSS 過濾器的元素
元素有一個包含復合層的后代節點(換句話說，就是一個元素擁有一個子元素，該子元素在自己的層里)
元素有一個 z-index 較低且包含一個復合層的兄弟元素(換句話說就是該元素在復合層上面渲染)
最后一條，原文是：
Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)
我回過頭看了下我的頁面，非常符合以上的條件，所以很容易被創建了復合層，導致懷疑 CSS3 3D加速的某些屬性影響了頁面中的內容的錯覺 ?直至到后期flash動畫與CSS3動畫同時存在的場景里的時候 才得以解決。
解決方法：
1. 如果不存在flash，只有CSS3動畫，影響到了頁面其它例如字體抖動的情況下：?
需要給動畫元素加 position:relative和 z-index: 1，這種做法的原理是人為提升動畫元素的z-index，讓瀏覽器知道這個元素的層排序，就不會把其他z-index比它高的元素也弄到復合層中了；
2. 如果flash和CSS3動畫并存，影響到了頁面其它例如字體抖動的情況或者CSS3動畫影響到了正在播放的flash的時候 ：
需要動畫元素加 position:relative和 z-index: 1，注意 一定要動畫元素的z-index高于flash的z-index;
注：flash在制作的時候如果加了濾鏡效果，在360安全瀏覽器【npapi】下，會有黑底出現，極其影響視覺感受。
