transition(트랜지션)
- 변환의 전/후 사이에 애니메이션을 추가해서 움직임을 부드럽게 만들어주는 속성
- transition은 전환되는 모션을 추가로 가미하는 속성이지 그 자체로 스타일을 주는 속성이 아니다.
hover와 같은 가상 클래스 선택자 또는 JS의 부수적인 액션에 의해 발동한다.
transition 속성
transition-property: 어떠한 속성에 transition을 적용할 것인지 지정- all(기본값)
- 복수의 속성을 지정하는 경우 쉼표로 구분
ex) transition-property: width, height; - 전환 수치를 다르게 하려면
transition: width 1s, height 2s;
transition-duration: transition에 걸리는 시간을 지정- 초(s), 밀리초(ms) 단위로 지정 가능
- 기본값: 0s
transition-timing-function: transition의 속도 패턴을 지정ease(기본값) : 시작할 때에는 빨라지다 느려짐liner: 일정한 속도로 변화ease-in: 천천히 시작했다가 속도를 높여 끝냄ease-out: 빠른 소고도로 시작했다가 천천히 끝냄ease-in-out: 천천히 시작했다가 정상속도가 됐다가 빠르게 끝냄
transition-delay: transition 요청을 받은 후 실제로 실행되기까지 기다려야 하는 시간의 양을 지정- transition을 순차적으로 일어나게 만들기 위해 사용
ex) transition-delay: 2s;
- transition을 순차적으로 일어나게 만들기 위해 사용
예제
transition 순서
transition: 1.property 2.duration 3.timing-funcition 4.delay
ex) trasition: color 0.4s ease-in-out 1s;opacity
- 요소의 불투명도 설정
- 불투명도는 특정 색상이 아니라 요소 전체와 내용(content, 텍스트 및 모든 하위 요소)에 적용
- 0.0(투명 100%) ~ 1.0(투명 0%)로 값을 조절
예제
visibility
- 요소를 보이게 할 건진 안 보이게 할 건지를 지정
visibility 속성
visible: 해당요소를 보이게 설정hidden: 해당요소 보이지 않게 설정collapse: table요소에 사용, 행이나 열을 보이지 않게 설정none: table요소의 행이나 열을 보이지 않게 설정
헷갈리지 말아야 할 사항
display:none;
-> 요소와 차지하고 있는 영역까지 안 보임visibility:hidden / opacity:0;
-> 요소는 보이지 않고, 차지하고 영역은 보인다.
