Transition
- 해당 요소에 추가할 CSS 스타일 전화 효과를 설정, 추가할 전환 효과가 지속될 시간을 설정
transition-delay
- 전환 효과가 나타나기 전까지의 지연 시간
transition-duration
- 전환 효과가 지속될 시간을 설정
transition-property
- 요소에 추가할 전환 효과를 설정
transition-timing-function
- 전환 효과의 시간당 속도
1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행
2. ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려짐
3. ease-in : 전환(transition) 효과가 천천히 시작됨
4. ease-out : 전환(transition) 효과가 천천히 끝남
5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝남
6. cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행
Transform
- transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있다.
transform 속성은 html요소에 다음과 같은 동작을 제공한다
translate
1. 해당 요소를 움직인다.
rotate
2. 해당 요소를 회전시킨다.
scale
3. 해당 요소의 크기를 변경한다.
skew
4. 해당 요소를 기울인다.
5. 해당 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용시킨다.
Animation
@keyframes규칙
keyframes 규칙 안에 이렇게 CSS 스타일을 설정해 놓으면, 해당 요소의 스타일은 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천히 변화한다.
from키워드 : 처음 스타일 명시
to키워드 : 마지막 스타일 명시
animation-name
- 애니메이션 효과의 이름 설정
animation-duration
- 애니메이션 효과를 재생할 시간 설정
animation-delay
- 애니메이션 효과가 나타나기까지의 지연 시간 설정
animation-iteration-count
- 애니메이션 효과의 반복 횟수 설정
animation-direction
- 애니메이션의 진행 방향 설정
animation-timing-function
- 애니메이션 효과의 시간당 속도 설정
1. linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행
2. ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려짐
3. ease-in : 애니메이션 효과가 천천히 시작
4. ease-out : 애니메이션 효과가 천천히 끝남
5. ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝남
6. cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행
animation-fill-mode
- 애니메이션 효과가 재생 중이 아닐 때 요소의 스타일 설정
animation-play-state
- 애니메이션 효과의 재생 상태 설정
animation shorthand- 모든 애니메이션 속성을 이용한 스타일을 한 줄에 설정
