[CSS] - 스타일로 태그에 동적 변화 만들기 (애니메이션, 전환, 변환)

• CSS3로만 HTML 태그 모양의 동적 변화 가능

• 자바스크립트로 구현하던 것을 CSS3로 작성 가능
• 3 가지 기법 지원

• 애니메이션(animation) 

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

'꽝!' 글자의 크기를 3초에 걸쳐 500%에서 100%로 서서히 축소되는 애니메이션을 작성.

애니메이션은 무한 반복한다.

 

• 전환(transition)

• HTML 태그에 적용된 CSS3 프로퍼티 값의 변화를 서서히 진행시켜 애니메이션 효과 생성

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

 

• 전환 설정 : transition 프로퍼티 이용

 

• 변환(transform)

텍스트나 이미지를 회전, 확대 다양한 기하학적인 모양으로 출력

• 회전 각도의 단위는 deg이며 시계방향의 회전