[CSS3] 엘리먼트 트랜지션/transition

즉시 바뀌는게 아니라 시간이 흐름에 따라 서서히 바뀌는 것을 트랜지션이라고 생각하면 된다.

마치 영화의 프레임을 이어놓은 것 같은.

 

# 어떤 것을 트랜지션할 수 있을까?

 

CSS 속성	트랜지션 대상값
background-color	색상
background-image	그라디언트
background-position	퍼센트 값, 길이
border-(상하좌우-)color	색상
border-(상하좌우-)width	길이
border-spacing	길이
top, bottom, left, right	길이, 퍼센트 값
color	색상
crop	사각 영역
font-size	숫자
font-weight	숫자
grid-*	다양함
height	길이, 퍼센트 값
letter-scpaing	길이
line-height	숫자, 길이, 퍼센트 값
margin(-상하좌우)	길이
max-height, max-width, min-height, min-width	길이, 퍼센트 값
opacity	숫자
outline-color	색상
outline-offset	정수
outline-width	길이
padding(-상하좌우)	길이
text-indent	길이, 퍼센트 값
text-shadow	섀도우
transform	숫자, 각도, 너비
vertical-align	키워드, 길이, 퍼센트 값
visibility	가시성
word-spacing	길이, 퍼센트 값
z-index	정수
zoom	숫자

 

# 상태 사이의 트랜지션 효과 적용 방법

 

1. transition 속성을 추가한다.

-webkit-transition:
-moz-transition:
-o-transition:
transition:

 

2. 각 트랜지션에 대한 값을 추가한다.

color .25s ease-in, opacity .5s ease, transform .25s ease-in-out 0;

transition  단축 속성값:

속성값	설명
기간	트랜지션이 시작부터 끝까지 걸리는 시간. 보통 초단위로 지정하며, 지정하지 않으면 기본값인 0이 지정됨.
시간 함수	트랜지션 진행에 따른 트랜지션 속도를 정의하는 함수. 필수 값은 아니며, 설정하지 않으면 기본값인 linear이 지정됨.
지연 시간	트랜지션이 시작하기 전에 얼마동안 멈출지를 지정. 이 값은 선택사항으로 설정하지 않으면 기본값인 0이 지정됨.