이 포스트에서는 CSS로 전환 효과(transition)를 구현하는 방법을 포스팅합니다.
CSS로 롤오버 버튼 만들기 포스트에서 포스팅한 바와 같이 간단한 롤오버 버튼은 자바스크립트 대신 CSS로 구현할 수도 있다는 글을 포스팅한 바 있습니다. 이 CSS를 응용하면 CSS에 의한 형태 전환이 이루어질 때 바로 전환되지 않고 서서히 매끄럽게 전환되는 효과를 구현할 수 있습니다. 이를테면 크기가 변하는 상자의 경우 바로 변하지 않고 서서히 늘어나며(혹은 줄어들며) 그 크기로 변하게 한다거나, 노란색 버튼을 빨간색 버튼으로 변하게 하는 경우 바로 빨간색이 되지 않고 주황색을 거치며 서서히 빨간색으로 변하게 한다거나 하는 식입니다.
CSS로 전환효과를 구현하기 위해서는 다음과 같이 4가지 속성을 줍니다. 다만 경우에 따라 통합 속성으로 축약해서 쓸 수도 있습니다.
selector {
transition-delay: ns;
transition-duration: ns;
transition-property: properties;
transition-timing-function: functions;
}
selector {
transition: property duration timing-function delay;
}
첫 번째는 4가지 속성을 하나씩 지정하는 방법이고 두 번째는 통합 속성으로 축약해서 지정하는 방법입니다.
- transition-delay
- 전환 효과를 시작하기 전에 몇 초간의 지연 시간을 둘 것인지를 설정할 수 있습니다. 예를 들어 1s라고 쓰면 1초간 지연된 후 전환 효과가 시작됩니다. 기본값은 0초입니다. 이 경우 지연 시간 없이 즉시 전환 효과가 시작됩니다.
- transition-duration
- 전환 효과가 진행될 시간을 설정할 수 있습니다. 예를 들어 .5s라고 쓰면 0.5초간 전환 효과가 진행됩니다.
- transition-property
- 전환 효과를 적용할 속성을 설정할 수 있습니다. 예를 들어, background라고 쓰면 배경에 관한 속성이 전환 효과 적용 대상이 됩니다. ‘width, height’ 식으로 복수 지정하거나 all을 넣어서 모든 속성에 전환 효과를 적용할 수도 있습니다.
- transition-timing-function
- 전환 효과의 진행 속도를 어떤 식으로 할 것인지를 지정할 수 있습니다. 몇 가지가 있으며 기본값은 ease입니다.
transition-timing-function에 들어갈 속성값은 몇 가지가 있는데 그 중 일반적으로 다음과 같은 다섯 종류가 많이 쓰입니다.
- linear
- 전환 효과가 등속으로 진행됩니다.
- ease
- 처음에는 느렸다가 중간에 빨라지고 끝으로 가면 다시 느려집니다. (기본값)
- ease-in
- 처음에는 느렸다가 끝으로 가면 보통 속도로 진행됩니다.
- ease-out
- 처음에는 보통 속도로 진행됐다가 끝으로 가면 느려집니다.
- ease-in-out
- 처음에는 느렸다가 중간에 보통 속도로 진행되고 끝으로 가면 다시 느려집니다.
통합 속성으로 할 때는 transition이라는 속성으로 하며 앞에서부터 property duration timing-function delay 순서대로 지정합니다. 다만, 이 경우 delay는 생략하거나 timing-function과 delay를 함께 생략할 수도 있습니다. 그리고 이 경우도 역시 콤마를 사용한 복수 지정이 가능합니다. (예: width .5s, height .5s)
이 CSS는 거의 모든 웹 브라우저에서 지원됩니다. 본래 이 CSS를 지정할 때 크롬과 사파리에서는 접두어로 ‘-webkit-‘을, 파이어폭스에서는 ‘-moz-‘를, 오페라에서는 ‘-o-‘를 넣어 주어야 했지만 크롬은 26.0 버전부터, 파이어폭스는 16.0 버전부터, 사파리는 6.1 버전부터, 오페라는 12.1 버전부터 접두어 없이 이 CSS를 지정할 수 있습니다. 인터넷 익스플로러의 경우는 10.0 버전부터 이 CSS를 지원합니다.
다음 예제는 CSS로 롤오버 버튼 만들기 포스트에 있는 코드에서 아래와 같은 CSS를 추가하여 수정한 예입니다.
.link_button {
-webkit-transition: all .5s; /* Safari 3.1 to 6.0 */
transition: all .5s;
}
<p><a class="red_button link_button" href="https://www.google.com/" target="_blank">Google</a></p> <p><a class="skyblue_button link_button" href="https://twitter.com/" target="_blank">Twitter</a></p> <p><a class="blue_button link_button" href="https://www.facebook.com/" target="_blank">Facebook</a></p>
이 CSS는 링크를 위한 버튼에 ‘link_button’이라는 클래스를 부여하여 모든 속성에 대해 0.5초간 전환 효과를 진행하는 코드입니다.
이렇게 나옵니다. 마우스를 대 보면 롤오버 효과가 매끄러운 효과로 작동하는 것을 확인할 수 있습니다.
이와 같이 CSS로 매끄러운 전환 효과가 있는 롤오버 버튼을 만들 수 있습니다.