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

มาเตรียมอุปกรณ์กันก่อน

ก่อนที่จะลองทำอนิเมชั่นให้อะไรขยับ เราก็ต้องมีสิ่งที่จะให้มันขยับก่อนโดยสร้างไฟล์ html ขึ้นมา และเราจะใช้เจ้าไดโนเสาร์มาเป็นเหยื่อในการเล่นของเรา (จะขอข้ามการเขียน css แบบปกติ)

<!DOCTYPE html>
<html>
    <head>
        <style>
            .dino {
                background-image: url("b2d.png");
                border-radius: 50px;
                background-size: contain;
                width: 100px;
                height: 100px;
                background-color: slateblue;
		    position: absolute;
            }
        </style>
    </head>
    <body>
        <div class = "dino"></div>
    </body>
</html>

จากโค้ดด้านบนจะได้ผลลัพธ์ออกมาเป็นแบบนี้

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

มาเริ่มทำกันเลย

สิ่งที่เราจะใช้ในการทำอนิเมชั่นก็คือ @keyframes ซึ่ง @keyframes นั้นมีกฎที่ว่า style ของelement ในปัจจุบันจะเปลี่ยนไปตามที่เขียนไว้ใน @keyframes 

เราจะมาลองให้ไดโนเสาร์เคลื่อนที่จากซ้ายไปขวากันก่อน โดยกำหนด @keyframes ขึ้นมา1ตัวใน tag <style> ให้ชื่อว่า move และให้เคลื่อนที่จากทางซ้ายไปทางขวาในระยะ 120px

            @keyframes move {
                0% {
                    left: 0px;
                }
                100% {
                    left: 120px;
                }
            }

และในcss property ของ class dino จะต้องระบุชื่อของ animation และใส่ระยะเวลาของ animation เป็น 3 วินาที

                animation-name: move;
                animation-duration: 3s;

เสร็จแล้วก็จะได้ผลดังนี้

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


จะเห็นว่าการเคลื่อนไหวของไดโนเสาร์มันดูแข็งไปนิดเราเลยจะเพิ่มอนิเมชั่นกลิ้
งเข้าไป ด้วยการเพิ่ม @keyframe ขึ้นมาอีกตัวชื่อว่า spin

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

แล้วเพิ่มanimation-name  spin เข้าไป

                animation-name: move, spin;

เท่านี้ไดโนเสาร์ก็กลิ้งได้แล้ว

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

นอกจากการเปลี่ยนตำแหน่งแล้วยังสามารถเปลี่ยนสีได้ด้วย

@keyframes move {
                0% {
                    background-color: slateblue;
                    left: 0px;
                }
                100% {
                    background-color: springgreen;
                    left: 120px;
                }
            }

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

                animation-timing-function: linear;

animation ก็จะสมูทขึ้น

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

มาถึงตรงนี้แล้วทุกคนก็สามารถที่จะทำ animation ขั้นพื้นฐานด้วยภาษา css ได้ระดับหนึ่งแล้ว แต่นี่ยังไม่ใช่ความสามารถทั้งหมดในการทำ animation ของ css ยังมีคำสั่งที่ยังไม่ได้กล่าวถึงอีกเช่น animation-direction: alternate; จะทำ animation ทั้งหมดอีกครั้งในทิศตรงข้าม animation-iteration-count: infinite; จะทำ animation ทั้งหมดซ้ำไปเรื่อยๆ หรือ animation-delay: 5s; เพื่อเซทดีเลย์ก่อนจะทำ animation และอื่นๆ

Extra!!

สำหรับใครที่อยากลองทำเพิ่มเติมแต่ไม่รู้ว่าจะทำออกมาในรูปแบบไหนดี เรามีโจทย์ให้ลองทำ animation ประมาณแบบด้านล่างนี้ โดยมีเฉลยให้ด้วย! (คำสั่งที่จำเป็นมีในบทความทั้งหมด และห้ามแอบดูก่อนนะ!) 

//วิธีดาวโหลดให้เข้าลิ้งค์>>กดคลิ๊กขวา>>กด save as

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

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้