ทำ Animation แบบไวๆ ด้วย CSS (ตอน 2)

คราวที่แล้วเราได้สอนการทำ css animation แบบเบื้องต้นกันมาแล้ว แต่คราวก่อนเป็นการทำ animation แบบของชิ้นเดียวเคลื่อนไหวไปมาเท่านั้น วันนี้เรามาลองทำแบบเอาหลายๆรูปมาใส่ animation เพื่อประกอบกันเป็นรูป animation กัน โดยจะมาทำเป็นรูปไดโนเสาร์จ้าวเก่ากับห้วงอวกาศแบบนี้ พร้อมแล้ว….ลุย!!

See the Pen
jOPQwWX by PacharaC (@b2dpcr)
on CodePen.

มาเริ่มกันเลย!!

ก่อนอื่นนำ div ที่มีเป็นไดโนเสาร์ มาซ้อนกับ div ของรูปโลกและจัดตำแหน่งให้เหมาะสมแบบนี้

See the Pen
LYVXjzB by PacharaC (@b2dpcr)
on CodePen.

จากนั้นสร้าง @keyframe แล้วใส่ animation spin ตามโค้ดต่อไปนี้

@keyframes spin {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }

และเพิ่ม css property ในส่วนของโลกว่า

                animation-name: spin;
                animation-duration: 10s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;

และไดโนเสาร์

                animation-name: spin;
                animation-duration: 1s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;

จะเห็นว่าproperty ที่ใส่นั้นใกล้เคียงกันต่างกันแค่เวลา แต่ความแตกต่างเพียงเท่านี้ก็ได้ผลลัพธ์ที่แตกต่างกันแล้ว

See the Pen
GRJwvOa by PacharaC (@b2dpcr)
on CodePen.

ต่อไปนำโลกมาใส่ในชั้นของอวกาศจัดตำแหน่งให้เรียบร้อย

See the Pen
OJVajqy by PacharaC (@b2dpcr)
on CodePen.

และใส่animation spin เช่นเดียวกันแต่ใส่ระยะเวลาเป็น 100 วินาที

See the Pen
ExjOvRE by PacharaC (@b2dpcr)
on CodePen.

ต่อไปก็ถึงคราวพระอาทิตย์แล้ว แต่รอบนี้เราจะให้ animation เป็นแบบย่อขยายขนาดแทนให้เพิ่ม @keyframe scale ลงไป

@keyframes scale{
                0% {
                      transform: scale(1) ;
                   }
                50% {
                      transform: scale(0.8) ;
                    }
                100% {
                       transform: scale(1) ;
                     }
          }

See the Pen
VwLVzqN by PacharaC (@b2dpcr)
on CodePen.

มาถึงตอนนี้ก็เสร็จสมบูรณ์แล้วกับไดโนเสาร์ในห้วงอวกาศ จะเห็นว่าในทางการเขียนโค้ดนั้นไม่ยากเลย ใช้คำสั่งเพียงเล็กน้อยเท่านั้นเอง สิ่งสำคัญในการทำ animation นั้นขึ้นอยู่กับความคิดสร้างสรรค์ของเราและการลองผิดลองถูกไปเรื่อยๆจนได้ผลลัพธ์ที่เราชื่นชอบครับ ทุกคนก็ลองทำ animation ที่ชื่นชอบในแบบของตัวเองกันดูนะครับ

Extra!!

ลองนำพระอาทิตย์มาใส่ spin เร็วๆก็ดูดีไปอีกแบบนะ * – *

See the Pen
PoqxJqN by PacharaC (@b2dpcr)
on CodePen.