原理：原理就是祖先元素逆轉，父元素正轉，那麼裡面內容是沒有動畫的。主要用到rotate，直接css控制旋轉就好了，道理很簡單（接下來再給他處理下，就好看點了）
html**：
正反相消動畫
css**：
接下來是keframes幀動畫了：
《1》content裡面的內容是不會動的，彷彿是沒有動畫效果一樣，但其實父級，祖先級都在旋轉
@keyframes rotate
100%
}@keyframes reverseroute
100%
}
《2》在內層旋轉元素上加乙個rotatex，content元素就已經在搖擺了，而且因為正反旋轉已經被抵消掉了，所以就只剩下rotatex的旋轉了
@keyframes rotate
50%100%
}@keyframes reverseroute
100%
}
看起來效果還不錯，可以作為乙個小動畫運用到專案中
css動畫 幀動畫
動畫 animation 設定關鍵幀 從左上，到右上，到右下的動畫 上面是系統性動畫屬性，下面拆分 animation 綜合性的動畫設定屬性 animation name 動畫名稱 animation duration 動畫的時間週期 animation timing function 動畫變化的速...
譯 CSS動畫 vs JS動畫
目前有兩個主流的方法在web上建立動畫 使用css或js。到底選擇哪種方法來實現動畫，完全取決於你的專案以及你想要達到的效果。tips 很多基礎的動畫都可以通過css或js來實現，但兩者的效果和時間會有差別。兩種方式各有千秋 如果你已經用了類似jquery的包含動畫函式的js框架，你會發現用它來控制...
CSS動畫標籤
keyframes 規則用於建立動畫。它的三個必要的值如下 animationname 定義動畫的名稱 keyframes selector 必需。動畫時長的百分比 css styles 乙個或多個合法的 css 樣式屬性 animation name 規定需要繫結到選擇器的 keyframe 名稱...