July 25, 2018
跟工程師討論後，他想要使用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
CSS 由「class」與「@keyframes」兩個部分來描述
CSS class部分
linear：從頭到尾速度相同
ease：開頭漸快，結尾漸慢
ease-in：以低速開始
ease-out：以低速結束
ease-in-out：低速開始，低速結束
cubic-bezier(n,n,n,n)：可自由調整數值
infinite：重複播放
alternate：逆向播放
CSS @keyframes
▼這一個連貫的動作，由三張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
<a href="index.php" class="bWorkDog">dog</a>
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;
}
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;}
}
{
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;}
}
CSS 替代 Javascrip
對應電腦版與手機版的MENU條
0 Comment(s)
