[CSS] 애니메이션, 전환, 변환

▶ 애니메이션(animation)

- HTML 태그의 모양변화를 시간 단위로 설정

 

1. @keyframes으로, HTML 태그의 시간별 모양 변화 만들기

 

2. 애니메이션 스타일 시트 작성

 

 

 

예제) 5초를 주기로 <span> 태그의 글자색을 파란색, 초록색, 빨간색으로 바꾸는 무한반복 애니메이션

 

 

예제) '웹' 글자의 크기를 3초에 걸쳐 500%에서 100%로 서서히 축소되는 애니메이션(무한 반복)

 

 

 

 

 

 

 

 

 

▶ 전환(transition)

- HTML 태그에 적용된 CSS 속성값의 변화를 서서히 진행시켜 애니메이션 효과 생성

- HTML 태그의 색이나 모양, 위치 등이 서서히 변하는 효과

 

● 전환 설정: transition 속성 이용

 

예제) font-size에 대한 전환 효과 

 

 

 

 

 

 

 

 

 

▶ 변환(transfrom)

- 텍스트나 이미지를 회전, 확대 다양한 모양으로 출력

- 회전 각도의 단위는 deg이며, 시계방향으로 회전

 

 

● transform에 사용 가능한 2차원 변환 함수

 

 

예제) 다양한 변환