標題:不需要 Javascript 做出 CSS 輕動畫(CSS Animation) 出處:A.PAO designSTUDIO BLOG 時間:Wed, 25 Jul 2018 10:32:59 +0000 作者:apao 地址:https://blog.apao.idv.tw/post/1267/ 內容: 跟工程師討論後,他想要使用JavaScript來呈現動畫效果,我也有另外一套方式,將在行進中的動畫改變成不同圖片的方式,來呈現左右不同方向行進時的動畫。JS可以計算到兩個物件的相對位置(碰撞與否),但CSS僅能計算單一物件的動作。重點是...會走路又能適當的時間改變方向的狗狗,可愛吧?! ▼這一個連貫的動作,由三張GIF所組合而成(因連動手機版版面限制。1.向右走至200px,2.向左走至0px,3.到原點踏步) ▼首先向右走(0-49% 平行向右移動) 點擊在新視窗中瀏覽此圖片 https://blog.apao.idv.tw/sample/animation/dog_119px_walk_right.gif ▼向左走(50-99% 平行向左移動) 點擊在新視窗中瀏覽此圖片 https://blog.apao.idv.tw/sample/animation/dog_119px_walk_left.gif ▼原地踏步 (100% 完成過程 回到原位置) 點擊在新視窗中瀏覽此圖片 https://blog.apao.idv.tw/sample/animation/dog_119px_stand.gif Sample連結: https://blog.apao.idv.tw/sample/animation/animation_picture.html HTML部分 將連結屬性改為:inline-block dog CSS 由「class」與「@keyframes」兩個部分來描述 CSS class部分 linear:從頭到尾速度相同 ease:開頭漸快,結尾漸慢 ease-in:以低速開始 ease-out:以低速結束 ease-in-out:低速開始,低速結束 cubic-bezier(n,n,n,n):可自由調整數值 infinite:重複播放 alternate:逆向播放 .bWorkDog{ position: absolute; display: inline-block; background: url(dog_119px_stand.gif) no-repeat; width: 119px; height: 119px; line-height: 999px; overflow: hidden; left: 0px; top: 50px; animation:WorkDog 5s linear 0s; /* Firefox: */ -moz-animation:WorkDog 5s linear 0s; /* Safari and Chrome: */ -webkit-animation:WorkDog 5s linear 0s; /* Opera: */ -o-animation:WorkDog 5s linear 0s; } CSS @keyframes @keyframes WorkDog { 0% {background: url(dog_119px_walk_right.gif); left: 0px; top: 50px;} 49% {background: url(dog_119px_walk_right.gif); left: 200px; top: 50px;} 50% {background: url(dog_119px_walk_left.gif); left: 200px; top: 50px;} 99% {background: url(dog_119px_walk_left.gif); left: 0px; top: 50px;} 100% {background: url(dog_119px_stand.gif); left: 0px; top: 50px;} } @-moz-keyframes WorkDog /* Firefox */ { 0% {background: url(dog_119px_walk_right.gif); left: 0px; top: 50px;} 49% {background: url(dog_119px_walk_right.gif); left: 200px; top: 50px;} 50% {background: url(dog_119px_walk_left.gif); left: 200px; top: 50px;} 99% {background: url(dog_119px_walk_left.gif); left: 0px; top: 50px;} 100% {background: url(dog_119px_stand.gif); left: 0px; top: 50px;} } @-webkit-keyframes WorkDog /* Safari and Chrome */ { 0% {background: url(dog_119px_walk_right.gif); left: 0px; top: 50px;} 49% {background: url(dog_119px_walk_right.gif); left: 200px; top: 50px;} 50% {background: url(dog_119px_walk_left.gif); left: 200px; top: 50px;} 99% {background: url(dog_119px_walk_left.gif); left: 0px; top: 50px;} 100% {background: url(dog_119px_stand.gif); left: 0px; top: 50px;} } @-o-keyframes WorkDog /* Opera */ { 0% {background: url(dog_119px_walk_right.gif); left: 0px; top: 50px;} 49% {background: url(dog_119px_walk_right.gif); left: 200px; top: 50px;} 50% {background: url(dog_119px_walk_left.gif); left: 200px; top: 50px;} 99% {background: url(dog_119px_walk_left.gif); left: 0px; top: 50px;} 100% {background: url(dog_119px_stand.gif); left: 0px; top: 50px;} } Generated by Bo-blog 2.1.1 Release