今天幫同事修改乙個動畫效果, 之前他使用的是 js+定時器新增樣式 來實現一張gif來回運動的效果
但定時器好像設錯了地方, 在跳轉過後再回到該頁, 動畫效果就會變得非常 鬼畜
我進來空閒, 正好幫他查缺補漏, 所以就自己用 @keyframe 幫他寫了個效果。
css部分**如下:
不過關於css3, 也還有需要注意的地方。
1.最初寫的時候, 在 50%處設定了 rotatey(180deg) 所以會在 0 -> 50%的時候緩動翻轉。
為了避免這種尷尬, 選擇了使其在快到50%前都還是未翻轉的狀態。(48%處新增的css)
2.在50%處翻摺過後, 返回的過程中又進行了一次翻摺。
折騰後發現, 最終狀態 100% 也是需要寫上狀態的 ................
ps: absolute 應該是可以寫到父元素上的, 此處就不做修改了。
CSS3之碰撞反彈動畫無限運動
示例 如下 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title css3 碰撞 動畫無限運動 title 6 style type text css 7.container 13.ball 24 keyframes ho...
CSS3動畫之逐幀動畫
要了解 css3 逐幀動畫，首先要明確什麼是逐幀動畫。看一下維基百科中的定義 我們兒時的記憶，手翻書，他所實現的就是逐幀動畫 在細聊 css3 逐幀動畫之前，我們先大致了解下前端實現逐幀動畫有哪些方案。下面我們仔細自己分析下這三種技術是怎麼實現上述條件的 但其缺點也是很明顯的 js 與 css3，一...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...