CSS order 속성으로 애니메이션 효과 구현하는 방법

CSS order 속성 애니메이션이란?

CSS의 order 속성은 플렉스 컨테이너(flex container) 안에서 각 항목이 배치되는 순서를 결정합니다. 이 속성은 기본적으로 정수 값을 받으며, 값이 작을수록 앞쪽에 배치됩니다.

일반적으로 order 속성은 애니메이션이 불가능한 것으로 알려져 있지만, @keyframes 규칙과 함께 사용하면 특정 시점에 순서 값이 변경되는 단계적 애니메이션 효과를 만들 수 있습니다. 아래 예제처럼 애니메이션 진행률의 특정 지점에서 order 값을 변경하면, 해당 시점에 요소의 위치가 전환됩니다.

예제 코드

다음 코드는 노란색 박스에 3초 길이의 무한 반복 애니메이션을 적용하고, 진행률 30% 지점에서 order 값을 4로 변경하는 예제입니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo1 {
            width: 600px;
            height: 180px;
            display: flex;
         }
         #inner {
            animation: myanim 3s infinite;
         }
         #demo1 div {
            width: 110px;
            height: 180px;
         }
         @keyframes myanim {
            30% {
               order: 4;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS order 속성</h1>
      <div id = "demo1">
         <div style = "background-color:yellow;order:1;" id = "inner"></div>
         <div style = "background-color:blue;order:2;"></div>
         <div style = "background-color:orange;order:3;"></div>
         <div style = "background-color:pink;order:4;"></div>
         <div style = "background-color:gray;order:5;"></div>
         <div style = "background-color:maroon;order:6;" id="inner"></div>
      </div>
   </body>
</html>

코드 동작 원리

display: flex — 컨테이너를 플렉스 박스로 설정하여 자식 요소에 order 속성을 적용할 수 있게 합니다.
animation: myanim 3s infinite — myanim 키프레임 애니메이션을 3초 동안 무한히 반복 실행합니다.
@keyframes myanim { 30% { order: 4; } } — 애니메이션이 30% 지점에 도달하면 대상 요소의 order 값이 4로 변경되어 화면상 위치가 바뀝니다.
인라인 스타일의 order 값 — 각 색상 박스는 초기에 order 1~6까지 순서대로 배치되어 있습니다.

참고 사항

order 속성은 위치(position)나 크기와 달리 중간 값을 보간(interpolation)하지 않기 때문에, 애니메이션이 부드럽게 이동하지 않고 지정된 시점에 즉시 전환됩니다. 또한 실제 프로젝트에서는 하나의 문서 내에서 동일한 id(inner)를 여러 요소에 중복 사용하지 않도록 주의해야 하며, 필요하다면 class 선택자로 대체하는 것이 좋습니다.