1. transition
선택자가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성이다.
2. 사용방법
1) transition-delay: (n)s;
- 변화되는 시간을 작성하는 속성
- 단위는 second(초)의 약자 s
2) transition-duration: (n)s;
- 변화가 일어나는 시간을 지정시키는 속성
- 단위는 second(초)의 약자 s
3) transition-property: ;
- 변화되는 css를 구분하여 따로 처리로 여러 개 지정 가능
- 변화의 시간차를 둘 속성을 정하는 속성
ex) transition-property: width, bakcground-color;
transition-duration: 1s, 0.3s;
-> 너비는 1초동안, 배경색은 0.3초의 시간차
4) transtion-timing-function: ;
- 변화되는 시간에 ease(가속 or 감속) 처리
- ease: 기본값, 느리게 시작한 다음 빠르게 전환한 다음 천천히 종료
linear: 처음부터 끝까지 같은 속도로 전환
ease-in: 가속, 느린 시작으로 빠른 끝
ease-out: 감속, 빠른 시작으로 느린 끝
ease-in-out: 느린 시직과 느린 끝으로 전환효과 지정
cubic-bezier(n, n, n, n): 3차 베지어 함수에서 자신의 값을 임의적으로 정함
Hello World!