CSS 애니메이션(animation) 속성 이해하기

키프레임 애니메이션을 정의한 후 요소에 애니메이션을 적용하려면 "animation" 속성을 이용해 키프레임 애니메이션을 연결해야합니다.

"animation" 속성은 아주 많은 옵션 값을 가지고 있기 때문에, 다양한 애니메이션 효과를 만들 수 있습니다.

CSS 애니메이션에서 사용할 수 있는 키프레임 애니메이션 속성은 다음 8개가 있습니다.

키프레임 애니메이션 전용 속성이므로 키프레임 애니메이션이 연결되지 않은 경우 적용되지 않습니다.

8개의 애니메이션 속성은 "animation" 속성 1개로 줄여서 표현할 수도 있습니다.

animation-name: rotate;

animation-duration: 2s;

animation-iteration-count: infinite;

animation-timing-function: ease;

속성은 

animation: rotate 2s infinite ease;

와 동일합니다.

애니메이션 속도 함수의 이해

animation-timing-function은 애니메이션이 어떤 속도로 진행될지를 결정하는 함수(function)를 선택하는 속성입니다.

지원하는 가속 함수 종류는 웹 브라우저에 따라 다릅니다. 기본적으로 9개의 공통 가속 함수를 사용할 수 있으며, 각 함수별로 애니메이션이 진행되는 속도 값이 다릅니다.

함수별 애니메이션 재생 속도 및 가속 값은 다음과 같습니다.

재생 속도 함수	설명	그래프
linear	일정한 속도로 애니메이션 재생.
ease	기본 값. 애니메이션이 느리게 시작했다 빨라지고, 다시 느리게 끝남. 시작 부분에서는 더 짧은 시간에 빨라지며, 끝나는 부분에서는 더 긴 시간 동안 느려짐.
ease-in	애니메이션이 느리게 시작함.
ease-out	애니메이션이 느리게 끝남.
ease-in-out	애니메이션이 느리게 시작했다 빨라지고 마지막에는 느리게 끝남. 시작과 끝나는 부분의 속도 증가/감소가 대칭임.
step-start	steps(1,start) 와 같음. 애니메이션 마지막 프레임으로 이동.
step-end	steps(1,end) 와 같음. 애니메이션 첫 프레임으로 이동.
steps(양의정수[,start|end])	양의 정수만큼 계단식으로 위치가 이동합니다. 스톱모션 애니메이션처럼 끊어지는 효과를 만듭니다. 옵션인 두 번째 파라메터로 "start", 또는 "end"(기본 값)를 사용할 수 있습니다. "start" 값은 첫 번째 스텝에서 애니메이션이 시작하고, "end" 값은 마지막 스텝에서 애니메이션이 끝납니다.
cubic-bezier(x1,y1,x2,y2)	제어점 위치를 표시하는 파라메터 4개의 숫자를 입력해서 베지어 곡선을 직접 그리는 방식으로 재생 속도를 제어할 수 있습니다. 베지어 곡선은 2개의 제어점 사이를 통과하는 곡선을 생성합니다. 베이어 곡선 좌표는 0부터 1까지의 값을 가지며 왼쪽 아래가 (0,0), 오른쪽 위가 (1,1) 좌표를 가집니다. 좌표 영역 사이의 좌표 2개를 순서대로 표기해서 베지어 속선을 생성하게 됩니다.

마지막의 "cubic-bezier" 함수를 이용하면 미리 정의된 다른 이름의 함수들을 그대로 표현할 수 있습니다. 기본적으로 미리 정의된 재생 속도 함수들은 "cubic-bezier" 함수로 적용한 파라메터 값 중 많이 사용되는 값을 별도의 이름으로 정해서 사용하는 것입니다.

웹 브라우저 개발자도구를 이용하면 미리 정의된 다양한 베지어 곡선 값들을 그래프 모양으로 확인하거나 미리 적용해 테스트 해 볼 수 있습니다.

애니메이션 채우기 모드의 이해

"animation-fill-mode" 속성은 애니메이션 시작 전(지연 시간 포함), 또는 애니메이션 종료 후의 요소에 적용하는 CSS 스타일을 지정합니다.

CSS 애니메이션 요소에 적용되는 CSS는 애니메이션 시작 전(지연시간 포함), 애니메이션 동작 중, 애니메이션 종료 후로 구분할 수 있으며, 각각 적용되는 CSS 스타일이 다를 수 있습니다.

다음 예제를 통해 조금 더 쉽게 이해할 수 있습니다.

.box{
    float: left;
    width: 50px;
    height: 50px;
    border: 1px solid pink;
    box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
    background-color: darkgray; /* 요소 기본 색상 */
    animation: rotate 1s ease 2s none;
}
@keyframes rotate{
    from{
        background-color: pink; /* 애니메이션 시작 색상 */
    }
    to{
        background-color: lightblue; /* 애니메이션 종료 색상 */
        transform: scale(1.3) translate(100px, 100px) rotate(120deg); /* 애니메이션 변형 */
    }
}

CSS 예제의 요소(".box")는 2가지 애니메이션으로 구분해서 이해해야 합니다.

첫 번째는 색상 애니메이션입니다. 기본 색상인 회색(".box") -> 애니메이션 시작시 핑크색("from") -> 애니메이션 종료시 하늘색("to") 순으로 변경됩니다.

두 번째인 요소의 변형(transform) 속성은 애니메이션 시작 시점까지는 변경가 없고, 애니메이션 종료 시점까지 크기("scale()"), 위치("translate()"), 회전("rotate()") 애니메이션이 실행됩니다.

채우기 모드("animation-fill-mode) 속성 값을 선택하는데 따라서 요소의 시작 색상이 기본 색상인 회색일 수도 있고, 애니메이션 시작 색상인 핑크색일 수도 있습니다. 그리고 변형 애니메이션 완료 후에 변형 전 상태로 돌아갈 수도, 애니메이션 마지막 프레임 상태로 유지가 될 수도 있습니다.

속성 값	설명	애니메이션
none	기본 값. 애니메이션 중이 아닌 경우, 요소의 CSS 스타일을 유지함.
forwards	애니메이션 중이 아닌 경우, 애니메이션 마지막 키프레임의 CSS 스타일을 유지 함.
backwards	애니메이션 중이 아닌 경우, 첫 번째 애니메이션 키프레임의 CSS 스타일을 유지 함.(지연 시간 포함)
both	애니메이션 시작 전에는 첫 번째 애니메이션 키프레임을 유지하며, 종료 후에는 마지막 키프레임 애니메이션의 CSS 스타일을 유지함. "none" 과는 다름.

다중 애니메이션 적용하기

"animation" 속성은 2개 이상의 키프레임 애니메이션을 적용해서 동시에 애니메이션이 실행되도록 할 수 있습니다.

복잡한 애니메이션 동작, 또는 순차적으로 일어나는 애니메이션을 여러 개의 키프레임 애니메이션으로 분리해서 작성한 후 하나의 요소에 적용해서 애니메이션을 완성할 수 있습니다.

한개로 작성한 복잡한 키프레임 애니메이션은 긴 흐름으로 인해 디버깅이 쉽지 않기 때문에 이런 방식으로 키프레임 애니메이션을 여러 개로 나누어서 완성하는 것이 재활용이나 유지보수에 더 좋습니다.

2개의 키프레임 애니메이션을 하나의 애니메이션 속성에 적용하려면 다음과 같이 작성합니다.

쉼표로 구분해서 2개 이상의 키프레임 애니메이션을 순서대로 나열하면 됩니다. 애니메이션은 순서와 관계 없이 동시에 실행됩니다.

animation: rotate 2s linear, scale 1s ease;

"animation" 속성 단축 표현은 개별 애니메이션 속성으로 다음처럼 표현할 수도 있습니다.

animation-name: rotate, scale;

animation-duration: 2s, 1s;

animation-timing-function: linear, ease;

그리고 중요한 점!

같은 애니메이션 속성을 2개의 키프레임 애니메이션에 동시 적용한 경우, 애니메이션 채우기 모드("animation-fill-mode") 속성 값에 따라서 순서상 뒤쪽에 오는 키프레임 애니메이션의 것만 실행될 수도 있고, 2개의 키프레임 애니메이션 속성이 동시에 적용될 수도 있습니다.

두 개 이상의 키프레임 애니메이션을 조합해서 사용하는 경우, 같은 속성을 중복 적용해서 사용하면 예상치 못한 애니메이션 동작을 만들게 될 수 있습니다. 같은 속성이 중복되지 않도록 키프레임 애니메이션을 분할하거나, 시간 지연을 이용해 순차적으로 실행되도록 애니메이션을 작성하는 것이 좋습니다.

예를 들어 다음처럼 2개의 키프레임 애니메이션을 동시에 적용하면

.box{
    float: left;
    width: 50px;
    height: 50px;
    border: 1px solid pink;
    box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
    background-color: darkred;
    animation: rotate 2s linear, scale 2s linear 1s;
}
@keyframes rotate{
    to{
        background-color: lightblue;
        transform: translate(100px, 100px) rotate(360deg);
    }
}
@keyframes scale{
    to{
        background-color: black;
        transform: scale(1.5);
    }
}

다음처럼 조금 이상한 건너뛰는 애니메이션이 됩니다.

키프레임 애니메이션의 마지막 위치가 유지되도록 애니메이션 채우기 모드("animation-fill-mode") 속성 값을 다음처럼 추가하면

animation: rotate 2s linear forwards, scale 2s linear 1s forwards;

부드럽게 연결되면서 마지막 애니메이션 프레임도 자연스러운 애니메이션이 완성됩니다.

2개 이상의 키프레임 애니메이션을 조합할 때는 애니메이션 간의 관계를 고려해서 속성 값을 작성해야 완성도 높은 애니메이션을 만들 수 있습니다.

"steps()" 애니메이션 속도 함수의 이해

애니메이션이 계단식(step)으로 단계별로 진행되도록 하는 속도 함수입니다.

속도 함수는 2개의 파라메터를 가지고 있습니다. 첫 번째 파라메터는 몇 개의 스텝으로 나눌지를 정하는 양의 정수 값을 사용합니다.

두 번째 파라메터는 "start", "end" 두 개중 한개의 값을 사용합니다.

기본 값은 "end" 이며, 두 번째 파라메터가 없으면 "end"가 됩니다.

"start" 는 첫 번째 스텝에서 애니메이션이 시작하고, "end"는 마지막 스텝에서 애니메이션이 끝납니다.

5스텝으로 나눌 경우, "start"와 "end"의 위치는 다음과 같이 이해할 수 있습니다.

"steps(5, start)" 와 "steps(5, end)" 는 다음과 같은 차이가 생깁니다.

start/end 옵션은 애니메이션 채우기 모드("animation-fill-mode") 속성이 "none" 이 아닌 경우 적용되지 않으므로 애니메이션 채우기 모드 속성을 사용하는 경우에는 사용할 필요가 없습니다.