11. 전환 효과 속성

- 전환(transition) : 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변경시키는 것

ex) 마우스를 올리면 color 속성값이 변해서 색이 변함

-css3부터 전환이 발생할 때 전환 효과를 지정할 수 있는 속성이 생김

 

1. transition-property 속성

- 전환 효과를 적용할 대상 속성을 지정

/* 형식 */
transition-property: 속성값;

- 속성값에은 속성명 또는 none, all를 넣는다

• none : 전환 효과 속성 지정안함
• all : 모든 속성을 전환 효과 대상으로 지정

- 여러 속성 지정은 쉼표로 구분해서 작성하면 됨

2. transition-duration 속성

- 전환 효과의 지속 시간을 결정

/* 형식 */
transition-duration: 시간;

- 속성값으로 초 단위 값 사용 ex) 36s

- 여러 속성을 같이 쓸 때는 시간도 그 수만큼 쉼표로 구분해서 작성(순서대로 매칭됨)

3. transition-delay 속성

- 전환 효과의 발생 지연됨

/* 형식 */
transition-delay: 시간;

-속성값으로 초단위 값 사용 ex) 40s

4. transition-timing-function 속성

- 전환 효과의 진행 속도를 지정

/* 형식 */
transition-timing-function: 속성값;

- 속성값으로 다음을 사용가능

• linear : 처음 속도와 마지막 속도 일정
• ease : 처음에 속도 점점 빨라지다가 중간부터 점점 느려짐
• ease-in : 처음에는 속도가 느리지만 완료까지 갈수록 빨라짐
• ease-out : 처음에는 속도 빠르지만 완료까지 갈수록 느려짐
• ease-in-out : 처음에는 속도가 느리지만 빨라지다가 다시 느려짐
• cubic-bezier(p1,p2, p3, p4) :  사용자 정의 속도로 진행

-완료 시점은 같은데 진행 효과의 속도가 다른거임

-cubic-beizer 함수 사용 시에는 크롬 개발자도구 혹은 https://cubic-beizer.com  이용

5. transition 속성

-앞에 나온 모든 속성을 한번에 작성 가능

/* 형식 */
transition: propery, duration, timing-fuction, delay;

 

**전환효과가 가능한 속성은 다음과 같다

background-color	background-position	border-bottom-color
border-bottom-width	border-left-color	border-left-width
border-right-color	border-right-width	border-spacing
border-top-color	border-top-width	bottom
clip	color	font-size
font-weight	height	left
letter-spacing	line-height	margin-bottom
margin-left	margin-top	margin-right
max-width	min-width	opacity
outline-color	outline-width	padding-bottom
padding-left	padding-right	padding-top
right	text-indent	text-shadow
top	vertical-align	visibility
width	word-spacing	z-index