해와 달 모두 잠자리와 마찬가지로 브라우저의 왼쪽 밖에서 등장하여 오른쪽 화면 밖으로 사라집니다. 이를 위해 해와 달에 각각 margin-left: -135px;과 margin-left -131px;을 적용합니다. 135px과 131px은 해와 달의 너비입니다. 오른쪽 화면 밖으로 사라지게 만들려면 브라우저 창 너비보다 큰 margin-left: 110%;을 적용합니다.
예제 소스 Exercise/16장/KidsGao/css/animation.css
/******************** *** Night2 *** ********************/ #night2 .moon { animation: moveMoon linear 10s infinite; } @keyframes moveMoon { from { margin-left: -135px; } /* 왼쪽 -135px 지점에서 시작합니다. */ to { margin-left: 110%; } /* 왼쪽 110% 지점까지 이동합니다. */ } /******************** *** Morning *** ********************/ #morning .sun { animation: moveSun linear 10s 1500ms infinite; } @keyframes moveSun { from { margin-left: -131px; } to { margin-left: 110%; } }