ใส่ animation CSS เลื่อน div ซ้ายไปขวา

ใส่ animation CSS เลื่อน div ซ้ายไปขวา บทความนี้สอนการเขียน animation ด้วยภาษา CSS โดยใช้คำสั่งในกลุ่ม animation-* ร่วมกับคำสั่ง @keyframes เพื่อทำให้ div เลื่อนแบบ animation สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ใส่ animation CSS เลื่อน div ซ้ายไปขวา

<style>
    @keyframes example {
        0% {
            left: 5%;
        }
        50% {
            left: 80%;
        }
        100% {
            left: 5%;    
        }
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: example;
        animation-duration: 10s;
        position: absolute;
    }    
</style>

<div class="box"></div>

ใส่ animation CSS เลื่อน div ซ้ายไปขวา จากตัวอย่างสร้าง keyframes ชื่อ example โดยกำหนดให้ keyframes แรกกำหนดให้ div เลื่อนไปทางขวา 5% และ keyframes ที่ 50% เลื่อนเป็น 80% และ keyframes สุดท้าย ตำแหน่งของ div กลับมาอยู่ที่เดิมที่ 5% จาก keyframes ดังกล่าวทำให้ div จะเลื่อนจากซ้ายไปขวาจนถึงตำแหน่งที่ 80% ของจอ และเลื่อนกลับมาที่ตำแหน่งเดิม คือ 5% จากนั้นนำ keyframes ชื่อ example ไปใส่ในคำสั่ง animation-name ของ div class box โดยกำหนดระยะเวลาเล่น animation ดังกล่าวที่ 10s