เคลื่อนไหวจากซ้ายไปขวาและจากขวาไปซ้าย

ฉันมีปัญหากับภาพเคลื่อนไหว CSS3 ฉันมีแอนิเมชั่นสองอัน: อันหนึ่งอยู่ด้านบนและอีกอันอยู่ด้านล่าง ภาพเคลื่อนไหวด้านบนจะโหลดจากความกว้าง 0 ถึง 100% และใช้งานได้ดี แต่ภาพเคลื่อนไหวที่สองควรโหลดความกว้างตั้งแต่ 0 ถึง 100% จากขวาไปซ้าย และใช้งานไม่ได้ :( ใครช่วยอธิบายหน่อยได้ไหมว่าทำไม นี่คือตัวอย่างซอของฉัน:

.left-to-right {animation:myfirst 1s ease;}
.right-to-left {animation:mysecond 1s ease;}

@keyframes myfirst {
  0%   {width:0; margin-left:100%;}
    100% {width: 100%; margin-left: 0;}
}
@keyframes mysecond {
  0%   {width:100%; margin-left: 0;}
    100% {width: 0; margin-left:100%;}
}