CSS 애니메이션 기초
웹페이지를 풍부하게 만들어주는 가장 좋은 방법은 뭔가가 움직이는 것을 보여주는 것입니다.
과거에는 플래시나 실버라이트같은 애니메이션과 상호동작에 특화된 도구나 확장이 있었지만, 표준에서 벗어난 고유의 기술이었고, 뛰어난 기능적인 특징들에도 불구하고 보안과 성능 문제등 여러가지 문제점이 부각되면서 완전히 퇴출되었습니다.
플래시나 실버라이트 모두 웹에 애니메이션을 구현해주는 특화되고 독보적인 특징이 장점인 만큼 이 기술을 대체할 수 있는 애니메이션 구현 기능과 속성들이 CSS에도 추가되었습니다.
CSS에서 지원하는 애니메이션 기능과 속성은 상당히 다양하며, 전문적인 애니메이션을 위한 라이브러리들도 여럿 공개가 되어있습니다. 다만, 이런 전문적인 라이브러리들은 자바스크립트를 필요로 하는 경우가 많기 때문에 스크립트 언어에 대한 학습을 추가로 필요로 하는 경우가 많습니다.
여기서는 전문적인 애니메션보다는 웹페이지를 조금 더 풍부하고 역동적으로 보일 수 있도록 해주는 기초적인 수준의 애니메이션을 구현하는 것에 초점을 맞춰서 알아보겠습니다.
CSS 애니메이션을 구현하는데 있어서 우리는 몇가지 중요한 속성 및 기능 키워드를 알아야 합니다.
대표적으로 "transform", "transition", "@keyframes", "animation" 키워드를 반드시 알아두어야 합니다. CSS로 기초적인 애니메이션을 구현하는데 주로 사용하는 속성이며, 아마도 우리가 필요로하는 웹페이지 안에서의 기초적인 애니메이션을 구현하는데는 이정도 속성만으로도 충분합니다.
CSS 애니메이션의 속성은 블록 요소(Block Element)에 적용되는 것을 기본으로 합니다.
특별한 경우가 아니면 블록 요소("<div>")에 애니메이션을 적용하게 되며, 블록 요소가 아닌 요소들은 블록 요소로 감싸서 블록 요소를 애니메이션 하는 것이 기본적인 사용 방법입니다.
애니메이션 속성들을 하나씩 알아보겠습니다.
transform
한글로는 "변형", 또는 트랜스폼 이라고 합니다. 요소를 이동하거나, 크기를 변경하는 요소의 크기, 위치, 색상 등의 속성 값을 바꾸는 동작을 하며, 시간 개념은 없습니다.
"transform" 속성에는 시간 개념이 없는 것이 중요합니다.
"transform" 속성은 요소의 속성을 변경하는 동작을 하지만, 트랜스폼 속성만으로는 시간 순서에 따르는 애니메이션이 일어나지는 않습니다. 변형이 적용된 결과만이 보여지며, 시간 순서에 따른 애니메이션 효과를 적용하려면 시간 개념이 있는 "transition" 속성과 함께 사용해야 변형 속성 값이 애니메이션이 시간 순서대로 표현됩니다.
변형 속성은 다음처럼 작성합니다. 변형 함수를 공백으로 띄워서 여러 개의 변형 함수를 동시에 요소에 적용할 수 있습니다.
transform: 변형함수(파라메터);
transform: 변형함수1(파라메터) 변형함수2(파라메터) 변형함수3(파라메터);
예를 들어
transform: translate(-200px, 200px) rotate(360deg);
이렇게 작성한 변형 속성 값은 요소를 오른쪽 아래로 200px 이동하면서 요소의 가운데를 중심으로 360도 회전합니다.
다음과 같이 작성한 CSS를 요소에 적용하면
div.box{
float: left;
width: 100px;
height: 100px;
border: 1px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
transform: scale(1.3) translate(100px, 100px) rotate(120deg);
}다음과 같이 적용된 요소가 웹브라우저 화면에 표시됩니다.
transition
한글로는 "전이"(또는 변이)이라고 하거나 "트랜지션" 으로 사용합니다. 시간 경과에 따라 하나의 속성 상태가 다른 속성상태로 변하는 것을 애니메이션으로 표현하는 것이라고 이해하면 빠릅니다.
대상 요소의 변형(transform)되는 시간과 전이할 속성(들)을 함께 기술하며, 여러 개의 "변형" 속성이 한꺼번에 실행 되도록 할 수도 있습니다.
예를 들어 요소의 이동과 회전 2가지를 변형(transform) 속성으로 정의한 경우, 이동만, 회전만, 또는 이동과 회전을 모두 되도록 할 수 있습니다.
"전이" 속성은 대상 요소가 어떻게 변형되는지를 기술하지는 않습니다. 어떻게 변형되는지는 "transform", "@keyframes" 에서 기술합니다. "transition"은 시간 순서에 따르는 순차적인 적용 단계와 방식을 표현하는 속성입니다.
정해진 시간동안 지정한 속성 값이 순차적으로 변경되는 애니메이션을 구현할 때 "transition" 속성으로 구현할 수 있습니다.
사이드바 메뉴를 펼치거나, 서서히 사라지도록 할 때 몇 초 동안 어떤 방식(가속도가 붙는 방식 등)으로 애니메이션이 되도록 할지를 "transition" 속성으로 구현할 수 있습니다.
CSS 애니메이션의 고급 기능들을 몰라도 즉시 사용 가능한 풍부한 웹페이지 액션을 추가할 수 있는 중요한 속성입니다.
"전이" 속성은 다음과 같이 표현합니다.
transition: 속성 || 애니메이션시간 || 타이밍방식(전이방식) || 지연시간;
"||" 은 또는으로 이후의 항목들은 생략이 가능하다는 뜻입니다.
예를들어
transition: all 0.5s;
와 같이 변형을 적용할 대상("all")과 시간("0.5s") 만 정의해서 사용할 수 있습니다.
다음처럼 정의한 클래스가 적용된 요소는 0.5초 동안 변형 속성에 적용한 3개의 변형 함수가 모두 적용되는 애니메이션이 실행됩니다.
div.box{
float: left;
width: 100px;
height: 100px;
border: 1px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
transform: scale(1.3) translate(100px, 100px) rotate(120deg);
transition: transform 2s ease;
}
@keyframes
키프레임 애니메이션을 만들 수 있도록 해주는 블록 키워드입니다.
전문적인 애니메이션 도구의 키프레임 기능처럼 시간 순서에 따라 요소의 동작을 정밀하게 제어할 수 있는 다양한 전용 속성들을 "@keyframes" 블록 안에서 사용할 수 있습니다.
간단한 예를 들면 다음처럼 키프레임 블록을 생성할 수 있습니다.
@keyframes heartbeat {
to {
transform: scale(1.3);
}
}이 키프레임 애니메이션은 대상 요소의 크기를 1.3배 키우는 애니메이션을 실행합니다.
작성한 키프레임 애니메이션 블록은 "@keyframes" 키워드 뒤에 추가한 이름(heartbeat)을 이용해 CSS 클래스에서 애니메이션을 호출하게 됩니다.
미리 정의한 키프레임 애니메이션을 여러 CSS 클래스에서 호출하면서 반복되는 같은 애니메이션을 여러 패턴으로 변경할 수도 있습니다.
CSS 클래스에서 키프레임 애니메이션을 호출하는 속성은 "animation" 입니다.
"animation" 속성은 사용할 키프레임 애니메이션 이름과 함께 애니메이션의 재생시간, 반복 횟수, 애니메이션 방식, 지연시간 등 다양한 설정을 추가할 수 있습니다.
앞서 정의한 키프레임 애니메이션은 다음처럼 키프레임 애니메이션을 적용할 요소를 위한 CSS 클래스에 추가하게 됩니다.
animation: heartbeat 1s 3 ease;
이 "animation" 속성은 "ease" 커브 곡선을 따라 1초동안 실행("1s")되는 "heartbeat" 키프레임 애니메이션을 3회 반복하고 멈추는 애니메이션을 대상 요소에 적용한다는 의미입니다. "animation" 속성으로 정의한 속성 값은 개별 애니메이션 속성명으로 다음처럼 분리해서 표현할 수도 있습니다.
animation-name: heartbeat;
animation-duration: 1s;
animation-iteration-count: 3;
animation-timing-function: ease;
키프레임 애니메이션을 호출하는 "animation" 속성 값을 다양하게 변경하면 같은 애니메이션에 다양한 변화를 줄 수 있습니다.
요소에 동시에 적용되어 실행되는 변형 애니메이션의 재생시간과 애니메이션 방식만을 정할 수 있는 "transform" + "transition" 조합과 달리 키프레임 애니메이션은 애니메이션을 시간 간격으로 나누어서 각각 다른 변형 속성 함수를 적용할 수 있습니다.
키프레임 애니메이션은 다음처럼 시간대를 분리해서 다양한 변형 속성 함수를 적용할 수 있습니다.
시간대를 분리하는 방법은 "%" 값으로 애니메이션이 진행된 정도를 구분하거나, 또는 "from ~ to" 와 같은 위치 키워드로 시작과 끝 점을 구분할 수 있습니다.
@keyframes heartbeat {
0% {
transform: scale(1.0);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1.0);
}
}
@keyframes heartbeat2 {
from {
transform: scale(1.0);
}
to {
transform: scale(1.3) translate(10px, 10px);
}
}다음처럼 키프레임 에니메이션을 정의해서 CSS 클래스에 적용할 수 있습니다.
div.box4{
float: left;
width: 100px;
height: 100px;
border: 1px solid pink;
box-shadow: 0 0 15px -5px rgba(0,0,0,0.4);
animation: rotate 2s ease; /* 키프레임 애니메이션 적용 */
}
@keyframes rotate{
to{
transform: scale(1.3) translate(100px, 100px) rotate(120deg);
}
}
키프레임 애니메이션 적용을 위한 "animation" 속성은 훨씬 더 다양하고 많은 속성 값을 제공하기 때문에 더 풍부하고 강력한 애니메이션 기능을 구현할 수 있습니다.
애니메이션을 무한 반복하려면 앞의 "animation" 속성에 "infinite" 속성 값을 추가해서
animation: rotate 2s infinite ease;
로 변경하면 애니메이션이 무한 반복됩니다.
기초 이동 애니메이션 구현하기
애니메이션의 가장 기초인 요소를 이동하는 애니메이션을 하나 만들어 보겠습니다.
큰 박스 안의 왼쪽 위 모서리에 작은 박스 하나를 위치시키고 360도 회전하면서 오른쪽 아래 모서리 방향으로 이동하는 애니메이션입니다.
<div class="coloring">
<div class="box"></div>
</div>div.coloring{
background-image: linear-gradient(45deg, rgba(255,0,36,1) 0%, rgba(255,9,121,1) 35%, rgba(0,212,255,1) 100%);
width: 300px;
height: 300px;
}
div.box{
width: 100px;
height: 100px;
background-color: #fff;
transform: translate(200px, 200px) rotate(360deg);
transition: all 1s ease 1s;
}
박스 배치는 기본 CSS 이므로 애니메이션 관련 속성만 알아보겠습니다.
"div.box" 클래스의
transform: translate(200px, 200px) rotate(360deg);
속성은 오른쪽 아래로 200px씩 이동시키고 360도 회전시키는 변형을 작은 박스에 적용합니다.
transition: all 1s ease 1s;
속성은 모든 속성 변경("all")을 1초("1s") 지연 후 1초("1s") 동안 "ease" 방식으로 애니메이션 합니다.
두 개의 속성 조합으로 앞에 보이는 사각형 애니메이션이 동작합니다. 실제 웹페이지에서는 사각형 박스를 굴리는 것 같은 애니메이션을 넣을 일은 없겠지만, 웹페이지에서 우리가 필요로 하는 대부분의 간단한 애니메이션 동작들은 이 수준에서 크게 벗어나지 않습니다.