CSS - Transition, Animation
Transition
전환 시 자연스럽게(스르륵)
- syntax
transition : property duration [timing-function] [delay]
[] 안에 있는 요소 생략 가능
ex)
transition: font-size 2500ms;
transition: background-color 2500ms cubic-bezier(.02,1,.96,.03) 1000ms;
- all 모든 요소(font-size, background-color etc) 적용
transition: all 2500ms;
- 각각 적용하기
transition: background-color 2500ms cubic-bezier(.02,1,.96,.03) 1000ms, font-size 1500ms cubic-bezier(.42,3,.77,.10) 2000ms;
property (속성)
duration (지속 시간)
- 단위 ms(1/1000초), s(초)
timing-function(전환의 속도)
생략 가능
- ease-in : 천천히 바뀌다 확 바뀜
- ease-out : 확 바뀌다가 천천히 바뀜
- ease-in-out :
- cubic-bezier() : 변화의 속도 제어 (곡선) https://cubic-bezier.com/
delay(전환 시작 지연)
- 단위 ms(1/1000초), s(초)
1초 후에 변화 시작
transition: background-color 2500ms cubic-bezier(.02,1,.96,.03) 1000ms;
Animation
Transition 보다 자유도가 높다. (적용 하고 싶을 때 적용 가능)
animation-property
animation-name : 이름 자유롭게 설정 가능
animation-duration (지속 시간) : 단위 ms(1/1000초), s(초)
animation-timing-function: ease-in: 천천히 바뀌다 확 바뀜 / ease-out : 확 바뀌다가 천천히 바뀜 / ease-in-out / cubic-bezier() : 변화의 속도 제어 (곡선)
animation-delay: 단위 ms(1/1000초), s(초)
animation-iteration-count: 반복. 숫자 또는 infinite
animation-direction: 방향. reverse(반대 방향 ex:to에서 from). alternate(방향 번갈아 가면서)
ex1) from에서 to로 변경
@keyframes name {
from {
<!-- rules -->
}
to {
<!-- rules -->
}
}
ex2) 0%~100%로 변경 (좀 더 디테일하게 변경 가능)
@keyframes name {
0% {
<!-- rules -->
}
50% {
<!-- rules -->
}
100% {
<!-- rules -->
}
}
.ex1{
animation-name: name;
animation-duration: 2000ms;
animation-timing-function: ease-in;
animation-delay: 1000ms;
iteration-count: 5;
}
CSS 정보 더 찾아보기 https://developer.mozilla.org/en-US/
