이번에는 잠자리가 화면 왼쪽에서 오른쪽으로 이동하는 애니메이션을 만들겠습니다. 애니메이션 이름은 날아다니는 잠자리라는 의미를 담아 flyDragonfly 속성값을 적용했습니다. 애니메이션 속도에는 linear, 애니메이션 동작 시간에는 7s를 적용합니다. 애니메이션 진행 횟수에는 무한 반복하는 infinite, 진행 방향에는 정방향으로 움직이는 normal 속성값을 입력합니다.
예제 소스 Exercise/16장/KidsGao/css/animation.css
#intro .cloudWrap .dragonfly { /* normal 속성값은 생략할 수 있습니다. */ animation: flyDragonfly linear 7s infinite normal; }
TIP
정방향은 from ~ to, 역방향은 to ~ from으로 이동하는 것을 말합니다. animation-direction 속성의 초기 속성값은 이미 normal로 설정되어 있으므로 정방향으로 이동할 때는 normal을 생략해도 됩니다.
잠자리는 브라우저 왼쪽 화면 밖에서 등장하여 오른쪽 화면 밖으로 사라집니다. 왼쪽 화면 밖으로 잠자리를 이동시켜야 하므로 from 키워드에 left: -366px을 적용합니다. 여기서 366px은 잠자리 너비입니다.
반대로 잠자리가 오른쪽 화면 밖으로 사라지게 하려면 브라우저 창의 너비보다 큰 값을 입력해야 합니다. 브라우저 창의 너비는 모니터 크기에 따라 다르므로 고정값(px) 대신 가변값(%)을 사용해야 합니다. 브라우저 왼쪽 끝에서 오른쪽 끝까지의 값은 100%이므로 이보다 10% 정도 더 이동시키면 모니터 크기에 상관없이 항상 화면 밖으로 사라집니다.