CSS(전환효과)

*전환

요소에 적용된 스타일의 속성값이 다른 속성값으로 변하게 하는 것

 

 

트랜지션과 속성

-transition 속성으로 한 번에 지정하기

 

 

애니메이션 속성으로 전환 효과 제어하기

전환 효과 속성보다 더 정확하고 부드럽게 전환 효과를 제어

 

 

키 프레임 정의하기

애니메이션은 정지된 이미지를 연속적으로 보여줘서 움직이는 것처럼 보이게 한다.

animation-name 속성

animation-name 속성은 특정 요소에서 적용할 키 프레임명을 지정

 

animation-duration 속성

애니메이션 지속 시간을 설정

 

animation-delay 속성

애니메이션 실행을 지연

 

animation-iterator-count 속성

애니메이션은 기본으로 1회 실행되고 종료

상황에 따라 애니메이션을 반복해서 보여 줘야 하는 경우 사용

 

animation-play-state 속성

애니메이션의 재생 상태를 지정

 

animation-direction 속성

애니메이션의 진행 방향을 지정

 

animation 속성으로 한 번에 지정하기

animation:bgchange 5s 3 ease-in;

 

 

 

 

변형(transform) 효과 적용하기

 

transform 속성

요소에 특정 변형 효과를 지정

 

 

웹 폰트와 사용하기

구글 폰트 적용하기

글꼴은 시스템에 기본으로 설치된 것도 많지만 실무에서는 시스템에 없는 글꼴이면 웹 폰트 방식으로 추가해서 사용

https://fonts.google.com/