[CSS] [11-2] 트랜지션 알아보기

*트랜지션 : 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것

 

 

1. 트랜지션의 여러가지 속성

transition-property	-트랜지션의 대상을 지정 ①all (기본값) => all값을 사용하거나 transition-property를 생략할 경우, 요소의 모든 속성이 트랜지션 대상이 됨 ②none => 트랜지션을 하는 동안, 아무 속성도 바뀌지 않음 ③속성 이름 => transition-property: width, height; => width값과 height값 모두에 transition속성을 지정해주고자 함
transition-duration	-트랜지션의 진행 시간을 지정 예) transition-property: width, height; transition-duration: 2s, 1s; =>이렇게 지정해주게 되면 width는 2초동안, height는 1초동안 바뀌고 transition-property: width, height; transition-duration: 2s; =>이렇게 지정해주면 width, height 모두 2초동안 바뀜
transition-delay	-트랜지션의 지연 시간을 지정
transition-timing-function	-트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 전체 속도 곡선을 만들 수 있음 ①linear : 시작부터~끝까지 똑같은 속도로 진행 ②ease(기본값) : 처음에는 느리게 시작 ~ 점점 빨라짐 ~ 마지막에 느리게 끝냄 ③ease-in : 느리게 시작 ④ease-out : 느리게 끝냄 ⑤ease-in-out : 느리게 시작 ~ 느리게 끝냄 ⑥cubic-bezier(n, n, n, n)
transition (한꺼번에)	-위의 4가지 속성을 한꺼번에 지정 (트랜지션의 적용 대상이 전체이고, 각각의 진행 시간이 같다면) 예) transition: 2s ease-in; =>보통 시간이 두개 쓰여있어야 함(처음 쓰인게 실행시간/두번째 쓰인게 delay시간). but 한번만 쓰였으므로 실행시간이 2s라는 뜻