ใช้คุณสมบัติ animation-fill-mode ค่า both เพื่อขยายคุณสมบัติแอนิเมชันในทั้งสองทิศทาง (ก่อนเริ่มและหลังจบ)
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes myanim {
from { left: 0px; background-color: green; }
to { left: 200px; background-color: blue; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>
คำอธิบาย: animation-fill-mode: both = รวม forwards + backwards
- ก่อนเริ่ม (ระหว่าง delay): คงสไตล์ keyframe แรก (
from= สีเขียว) - หลังจบ: คงสไตล์ keyframe สุดท้าย (
to= สีน้ำเงิน, left 200px)
เหมาะสำหรับแอนิเมชันที่มี delay และต้องการคงสถานะทั้งก่อนและหลัง
