CSS Animation - 以小米為師

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

 

在官網上關於行動電源或是手机的介紹中，如果使用者將鼠標移動到適時的地方，圖片就會有移動的視覺效果產生，而且只會執行一次而以，除非再重新連結網址，我覺得這是一個非常棒的設計，不用太多的動態效果卻又可以吸引使用者目光，所以就試著把它用來展示系統的 Use Case

最主要的精神如下：
1.要有一段 java script來判斷滑鼠的位置，在优秀网站看前端 —— 小米Note介绍页面有提到，用 remove class, add class的方式讓 css動畫執行

2.定義 css animation執行方式，小米的作法是一開始就先讓圖片位移，等到滑鼠移到時才作回位的動作

  -webkit-transform: translate3d(280px, 0, 0);

  transform: translate3d(280px, 0, 0);