goTOP
July 25, 2018

不需要 Javascript 做出 CSS 輕動畫(CSS Animation)

| |
網頁語言 » CSS | 閱覽(1743) | Posted by apao at 10:32
跟工程師討論後,他想要使用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
<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;
}


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;}
}
Facebook twitter LINEk
文章来自: 本站原創
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我