Animate.css 介紹

Animate.css    Animate.css GitHub

直接看影片教學是最快的了~~

CSS 效果範例

25+ Examples of Material Design With Awesome Effects

好用的 CSShake - 製造晃動的動畫效果

有時候希望在使用 ajax捉資料時可以跟使用者互動，一般是將滑鼠的狀態作改變

但是也可以用一些動畫來顯示，像 CSShake就可以達到我的要求

只要套用 csshake.min.css，然後再要套用的 element上 class加上比如 shake shake-little (小震動)

就可以囉，真是方便。



CSShake

CSShake Github

bootstrap 使用css transform後會造成 nav bar閃爍(flicker)的問題 in chrome

參考文件：Prevent flicker on webkit-transition of webkit-transform

因為實作CSS Animation - 以小米為師時，發現只要移動滑鼠滾輪時，bootstrap nav bar就會一閃一閃的，眼睛很不舒服，可是在 IE 11上就沒這個問題，這是因為 css使用了 -webkit-transform  造成的，解決方式就是在 body內加上 -webkit-backface-visibility : hidden; 即可

$(window).scrollTop() 的值都為 0

因為之前為了要解決一個問題 開啟 bootstrap modal會造成首頁內容左移 (shit to left)，css 設定如下

html {
  overflow: hidden;
  height: 100%;}

因為把 height設為 100%，所以捉取到的值永遠都是 0，但為了作到動畫效果  CSS Animation - 以小米為師   ，所以只好又把它修改回來。

CSS Animation - 以小米為師

參考網站
优秀网站看前端 —— 小米Note介绍页面
小米電源官網