[HTML5] 9-1 전환

전환

: 어떤 이벤트에 대해서 지정한 시간 내에 속성의 특정 상태가 다른 상태로 부드럽게 변화하는 것

*스타일의 점진적인 변화 -> 애니메이션 효과 부여

 

 

-전환 지정 방법

: 어떤 이벤트에 대해서 스타일 변화를 부여할 지를 지정

: 전환 효과를 부여하려는 속성의 처음 상태와 최종 상태를 지정

: 전환 관련 속성의 설정

-> transition-property 속성 : 전환이 적용될 속성의 이름 나열. 여러 개인 경우에는 콤마로 구분

-> transition-duration 속성 : 전환이 진행되는 시간 지정

 

 

 

예시)

 

 

 

 

transition-delay 속성

: 전환 효과가 시작되기 전 대기 시간 지정

-전환이 바로 시작하지 않고 지정한 시간이 지난 후에 시작

-값 -> 초(s), 밀리초(ms)

 

 

 

transition-timing-function 속성

: 전환이 진행되는 속도의 형식 지정

 

-> ease : 느리게 시작해서 점점 빠르게 진행하다가 후반부에 다시 느리게 진행

-> linear : 처음부터 끝까지 일정한 속도로 진행

-> ease-in : 느리게 시작해서 점점 빠르게 진행

-> ease-out : 빠르게 시작해서 점점 느리게 진행

-> ease-in-out : 중간까지는 ease-in, 중간이후는 ease-out

 

 

 

전환 관련 속성 예시)

 

 

 

여러 속성의 전환 지정 예시)

 

출력:

 

 

 

전환의 일괄 지정 예시)

 

 

 

 

전환을 부여할 수 있는 속성

: CSS의 모든 속성과 속성값에 전환 효과를 부여할 수 있는 것은 아니다.

 

 

 

 

변환을 활용한 전환 예시)