เอฟเฟกต์แอนิเมชั่นใน CSS

แอนิเมชั่นเป็นกระบวนการในการสร้างเอฟเฟกต์การเคลื่อนไหวและเปลี่ยนรูปลักษณ์ CSS รองรับเอฟเฟกต์แอนิเมชั่นต่างๆ เพื่อเปลี่ยนการเคลื่อนไหวของเหตุการณ์

ภายใต้แอนิเมชั่น จะใช้คีย์เฟรมของแนวคิด คีย์เฟรมจะควบคุมขั้นตอนของแอนิเมชั่นขั้นกลางใน CSS3

ตัวอย่างด้านล่างแสดงความสูง ความกว้าง สี ชื่อ และระยะเวลาของแอนิเมชันพร้อมไวยากรณ์คีย์เฟรม -

ไวยากรณ์

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}

div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}