13 CSS3와 애니메이션

13-1 변형

• 2차원 변형과 3차원 변형
• transform과 변형 함수
• translate 변형 함수 - 요소 이동시키기
• scale 변형 함수 - 요소 확대/축소하기
• rotate 변형 함수 - 요소 회전하기
• skew 변형 함수 - 요소를 비틀어 왜곡하기

13-2 변형과 관련된 속성들

• transform-origin 속성 - 변형 기준점 설정하기
• perspective, perspective-origin 속성 - 원근감 표현하기
• transform-style 속성 - 3D 변형 적용하기
• backface-visibility 속성 - 요소의 뒷면 표시하기

13-3 트랜지션

• 트랜지션이란
• transition-property 속성 - 트랜지션을 적용할 속성 지정하기
• transition-duration 속성 - 트랜지션 진행 시간 지정하기
• transition-timing-function 속성 - 트랜지션 속도 곡선 지정하기
• transition-delay 속성 - 지연 시간 설정하기
• transition 속성 - 트랜지션 속성 한꺼번에 표기하기

13-4 애니메이션

• CSS와 애니메이션
• @keyframes 속성 - 애니메이션 지점 설정하기
• animation-name 속성 - 애니메이션 이름 지정하기
• animation-duration 속성 - 애니메이션 실행 시간 설정하기
• animation-direction 속성 - 애니메이션 방향 지정하기
• animation-iteration-count 속성 - 반복 횟수 지정하기
• animation-timing-function 속성 - 애니메이션 속도 곡선 지정하기
• animation 속성 - 애니메이션 관련 속성 한꺼번에 표기하기