CSS ภาพเคลื่อนไหว ภาพเคลื่อนที่

CSS ภาพเคลื่อนไหว ภาพเคลื่อนที่ บทความนี้สอนเขียนภาษา CSS เพื่อทำให้รูปภาพเคลื่อนที่จากซ้ายไปขวา และขวาไปซ้าย วนไปเรื่อยๆ ด้วยคำสั่ง -webkit-animation และ webkit-keyframes สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง CSS ภาพเคลื่อนไหว ภาพเคลื่อนที่

<style>
    #animation {
        top: 10%;
        position: absolute;
        -webkit-animation: linear infinite;
        -webkit-animation-name: run;
        -webkit-animation-duration: 25s;
    }
    @-webkit-keyframes run {
        0% {
            left: 50px;
        }
        50% {
            left: calc(100% - 50px);
        }
        100% {
            left: 50px;    
        }
    }    
</style>

<div id="animation">
    <img src="https://www.devdit.com/favicon-16x16.png">
</div>

CSS ภาพเคลื่อนไหว จากตัวอย่างแสดงรูปภาพด้วยแท็ก img อยู่ภายใน div id="animation" โดยใน CSS ใช้คำสั่ง -webkit-animation ร่วมกับ @-webkit-keyframes เพื่อทำให้ภาพเคลื่อนไหว จากตัวอย่างภาพเคลื่อนไหวด้วยความเร็ว 25s เริ่มต้นจากทางซ้ายของจอภาพด้วย left: 50px และเคลื่อนไหวไปทางขวา เมื่อสุดขอบจอทางขวา ก็จะเคลื่อนไหวกลับมาทางซ้าย วนไปเรื่อยๆ ด้วยคำสั่งของภาษา CSS