CSS3動畫之 來回運動

今天幫同事修改一個動畫效果, 之前他使用的是 js+定時器添加樣式 來實現一張gif來回運動的效果

但定時器好像設錯了地方, 在跳轉過后再回到該頁, 動畫效果就會變得非常 鬼畜

我進來空閑, 正好幫他查缺補漏, 所以就自己用 @keyframe 幫他寫了個效果。

css部分代碼如下: 

 

不過關於css3, 也還有需要注意的地方。

1.

最初寫的時候, 在 50%處設置了 rotateY(180deg) 所以會在 0 -> 50%的時候緩動翻轉。

為了避免這種尷尬, 選擇了使其在快到50%前都還是未翻轉的狀態。(48%處添加的css)

2.

在50%處翻折過后, 返回的過程中又進行了一次翻折。

折騰后發現, 最終狀態 100% 也是需要寫上圖片狀態的 ................

 

the end

PS: absolute 應該是可以寫到父元素上的, 此處就不做修改了。