Transition
요소의 속성 상태변화를 이용한 애니메이션 기본으로, 서로 다른 스타일 정의 상태 사이의 변화를 감지하여 브라우저에 애니메이션 할 것인지 결정한다.
따라서 마우스가 요소 위에 올라갔을 때(처음)의 상태와 나갔을 때(끝)의 상태에 빈번히 사용한다. 이보다 더 많은 스토리와 분기를 가진 애니메이션은 별도의 속성을 사용한다.
- 참고 할 것
이 글은 CSS 애니메이션 파헤치기의 첫 번째 하부 기사다. 연관 기사가 있으니 참고하기 바란다.
.ex-01 {
display: inline-block;
margin: 0;
padding: 20px;
text-decoration: none;
font-size: 12px;
color: white;
background-color: black;
transition: all 1s;
}
.ex-01:hover {
padding: 20px 70px;
color: yellow;
background-color: red;
}
:before, :after 가상 요소 선택자를 비롯해 서로 상태가 다른 거의 모든 HTML 요소에 사용할 수 있고, 선언은 처음 상태를 가진 요소에만 한다.
마크업 - Transition
4개의 속성을 사용한다. 이 속성은 열거하거나 단축(Shorthand) 문법을 사용할 수 있다. MDN에서는 각 요소와의 애니메이션 싱크(Sync)를 위해 단축 문법 사용을 권하고 있지만 생각보다 직관적이지 않으므로 열거식으로 먼저 사용해 보길 바란다.
아래는 단축 문법에서의 속성 표기 순서다. 순서는 정확히 지켜야 한다.
Transition 속성과 값
| 속성 | 값 |
|---|---|
| transition-property | 효과를 적용할 속성. 2개 이상일 경우는 쉼표(,)로 구분. |
| transition-duration | 효과의 지속 시간을 표기. 1s는 1초. |
| transition-timing-function | 애니메이션 상태화의 중간값을 정의한다. 자세한 설명은 후술. |
| transition-delay | 효과의 지연시간. |
transition-property 속성의 값으로 all을 사용할 수 있다. 끝 상태 요소(예를들면 a:hover)의 속성값이 처음 상태 요소와 다른 것이 있다면, 이들 모두 transition-property에서 명시한 것으로 간주한다.
.ex-01 {
display: inline-block;
margin: 0;
padding: 20px;
text-decoration: none;
font-size: 12px;
color: white;
background-color: black;
transition: all 1s;
/* transition-property: padding, color, background */
}
.ex-01:hover {
padding: 20px 70px;
color: yellow;
background-color: red;
}
Transition 기본 문법
지속시간, 타이밍, 지연시간이 모두 동일한 값을 가진다면 transition-property에 여러 속성을 열거할 수 있다. 각 속성이 모두 다른 값을 갖는다면 코드의 양이 많아지므로 다른 표기법을 사용한다.
div {
transition-property: width, color;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 3s;
}
기본 문법의 확장
속성이 모두 다른 값을 갖는다면 아래의 방법을 사용할 수 있다. 각 속성의 첫 번째 값들이 하나의 세트를 이룬다. 따라서 width 1s ease 3s가 한 세트, 두 번째 속성들이 한 세트가 되어 height 2s ease-in 1s가 되는 방식이다.
transition의 속성은 표기 위치가 정해져 있으므로, 이 순서에 맞춰 값을 열거하면 된다.
div {
transition-property: width, height, border-width, color;
transition-duration: 1s, 2s, 1s, 3s;
transition-timing-function: ease ease-in ease-out linear;
transition-delay: 3s, 1s, 1s, 2s;
}
단축 문법 - Shorthand
익숙해지면 가장 흔히 사용하는 방법이다. 애니메이션의 흐름을 조절하는 transiton-delay 속성이 맨 마지막에 위치하는 이유로 이 표기법이 각 속성의 지연시간을 한눈에 파악하기 가장 좋다.
div {
transition: background 2s ease 1s,
padding 1s linear 2s;
}
타이밍 - Timing Function
애니메이션에서 중요한 축을 차지하는 요소로, 두 상태 사이의 중간값을 계산하는 방식을 명시하여 애니메이션의 완급을 조절할 수 있다.
- 참고 할 것
모든 움직임에는 이 타이밍이라는 개념이 있다. 우리가 팔을 들어올릴 때도 느리게 시작하여 어느 지점에서는 등속 운동을 하다가, 마지막으로 치닫을 때 쯤 그 속도가 감소하여 마침내 움직임이 멈춘다. 로보트와 같이 딱딱한 움직임 역시 매우 느린 슬로우 모션으로 본다면 동일한 개념으로 움직인다.
이러한 모션 타이밍이 없다면 모든 움직임이 선형적이 되어 매우 부자연스러운 모습을 보이게 된다.
속성과 값
transition-timing-function 속성에 명시하며 값은 다음과 같다.
| 속성 | 값 |
|---|---|
| ease | 기본값. 느리게 시작하여 점점 빨라졌다가 느리게 끝난다. |
| linear | 모든 속도가 등속 운동과 같은 선형 움직임이다. |
| ease-in | 느리게 시작하여 선형 움직임이 된다. |
| ease-out | 선형 움직임으로 시작하여 점점 느려진다. |
| ease-in-out | 느리게 시작하여 느리게 끝난다. |
| cubic-bezier(n,n,n,n) | 사용자 정의 타이밍으로, 큐빅 베지어를 정의하는 네 점을 0과 1 사이에서 명시하여 표현한다. 보통 온라인 그래프를 통해 이 수치를 제공받아 사용한다. ease 같은 값 역시 이 수치에 이해하기 쉬운 네임라벨을 붙인 것 뿐이다. 만일 웹 서핑 중에 매우 부드럽고 자연스러운 움직임을 봤다면 이 수치를 잘 조정했기 때문이다. |
- 참고 할 것
CSS에서의 타이밍은 Adobe After Effects나 기타 모션 애플리케이션에서의 Easing 개념과는 다르다.
여러 모션 애플리케이션에서는 키프레임(Key Frame)을 중심으로 들어오는 움직임을 ease-in, 나가는 움직임을 ease-out으로 보는 것과 달리, CSS의 ease-in은 ease-start라는 개념으로 보는 것이 더 좋다.
ease, ease-in 처럼 이미 정의되어 있는 타이밍 속성값은 easings.net을 참고해서 움직임을 살펴볼 수 있다. 베지어 곡선을 직접 수정하고 싶다면 cubic-bezier.com을 이용한다.
종합예제 - Transition
.ex-02 {
display: inline-block;
margin: 0;
width: 80px;
height: 80px;
line-height:80px;
text-decoration: none;
text-align: center;
font-size: 12px;
color: #999;
background-color: #f4f4f4;
border-width: 1px;
border-style: solid;
border-radius: 10%;
border-color:#cacaca;
transition: width .2s ease,
height .2s ease,
line-height .2s ease,
color .2s ease,
font-size .2s ease,
border .2s ease,
background-color .2s ease,
border-radius .2s ease .4s;
}
.ex-02:hover {
width: 120px;
height: 120px;
line-height:120px;
color: #ffcccc;
font-size: 20px;
border-width: 5px;
border-color:#ff5e5d;
background-color: #fa8382;
border-radius: 50%;
}