[ transition ]
오늘의 포스팅 내용은 transition 입니다.
Q. ) transition이 무엇인가요? What?
A. ) transition이란 특정한 element(요소)의 속성에 변화나 움직임등을 넣고 싶을 때,
해당 속성의 변화 속도를 지정해주거나, 부드럽게 보여주게 하는 기능입니다.
Q. ) 어떻게 사용하나요? How?
A. ) 우선은 transition을 사용하기 위해서는 CSS에서 다음과 같은 기본셋팅이 필요합니다.
- 해당 element의 display 속성값이 [ block ] 혹은 [ inline-block ] 값이어야 한다.
a {
display : inline-block;
}
기본 셋팅이 완료되었다면, transition 속성을 사용해봅니다.
transition은 기본적으로 다음과 같은 네가지의 기능으로 구성되어 있습니다.
1. transition-property : (값)
변화를 원하는 속성을 선택하기 위해 사용.
* all : 모든속성에 대해 적용
*특정속성 : 특정한 속성에 대해서만 적용
2. transition-duration : (값)
속성의 변화과정을 속도 지연을 위해 사용.
* 1s : 변화가 1초동안 나타남
* 0.1s: 변화가 0.1초동안 나타남
3. transition-delay : (값)
속성의 변화시작을 지연시킬때 사용.
* 1s : 변화가 1초후에 나타남
* 0.1s: 변화가 0.1초후에 나타남
4. transition-timing-function : (값)
변화하는 속도의 패턴을 지정해주기 위해 사용.
다음은 기본적으로 많이 사용하는 값.
* ease : 천천히 시작해서 도중에 빨라졌다가 느려지면서 종료
* ease-in : 천천히 시작해서 점점 가속
* ease-out : 천천히 시작해서 느려지면서 종료
* ease-in-out : ease와 동일
* linear : 일정한 속도로 변화
위의 네가지 기능들을 참고하여
다음과 같은 구문을 작성해 실행해 봅시다.
a {
display : inline-block;
transition-property: all;
transition-duration: 1s;
}
a:active {
transform : translate(20px, 30ox);
font-size : 2rem;
}
