[css] css 공부 정리6_transition & transform & animation

Transform (전환)

 

 

2D 변환 함수

 

3D 변환 함수

 

perspective :: 하위 요소를 관찰하는 원근 거리를 지정

 

 

backface-visibility :: 3D 변환으로 회전된 요소의 뒷면 숨김 여부

 

Transition (전환)

transition : 속성명 지속시간 타이밍 함수 대기시간

 

transition-property :: 전환 효과를 사용할 속성 이름을 지정

 

transition-duration :: 전환 효과의 지속시간을 지정

 

transition-timing-function :: 전환 효과의 타이밍(Easing) 함수를 지정

 

transition-delay :: 전환 효과과 몇 초 뒤에 시작할지 대기시간을 지정

 

Animation

@keyframes
• CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능
• 애니메이션의 중간 지점마다 CSS 속성 값을 지정하여 세밀하게 애니메이션 조절하는 기능
• 키프레임을 변수에 선언하고 해당 변수를 CSS 에서 불러와서 사용할수 있다!

 

• Keyframes 로 설정되는 값
     • from ~ to
     • 0% ~ 100%

 

 

Animation 속성

• 이름 : keyframes 로 지정한 애니메이션 이름
• 지속시간 : 애니메이션 지속 시간
• 진행형태 : 애니메이션이 진행되는 형태(시간 함수)
     • ease / linear 등등
• 반복횟수 : 반복되는 횟수를 지정, 소수점 가능, infinite

 

 

Animation 속성

• animation-name (이름)
• animation-duration (지속시간)
• animation-delay (지연시간)
• animation-iteration-count (반복횟수)
• animation-timing-function (반복형태)
• animation-direction (애니메이션 방향)