不需要 Javascript 做出 CSS 輕動畫（CSS Animation）

Wed, 25 Jul 2018 02:32:59 +0000

跟工程師討論後，他想要使用JavaScript來呈現動畫效果，我也有另外一套方式，將在行進中的動畫改變成不同圖片的方式，來呈現左右不同方向行進時的動畫。JS可以計算到兩個物件的相對位置（碰撞與否），但CSS僅能計算單一物件的動作。重點是...會走路又能適當的時間改變方向的狗狗，可愛吧？！
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）

▼首先向右走（0-49% 平行向右移動）

▼向左走（50-99% 平行向左移動）

▼原地踏步 (100% 完成過程回到原位置)

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;}
}

[評論] 不需要 Javascript 做出 CSS 輕動畫（CSS Animation）

Thu, 01 Jan 1970 00:00:00 +0000

A.PAO designSTUDIO BLOG

不需要 Javascript 做出 CSS 輕動畫（CSS Animation）

[評論] 不需要 Javascript 做出 CSS 輕動畫（CSS Animation）