두 가지 방법으로 적을 수 있다.
1. animation 안에 한 번에 적기
animation: 이름 지속시간 딜레이시간 function;
2. animation 따로, delay 따로 적기 (반복되는 animation 속성을 따로 묶을 수 있음)
animation-delay: 시간;
로드 후 애니메이션이 작동되기까지의 딜레이를 적용할 수 있다.
animation: name 1.1s 0.1s ease infinite;
-> 새로고침 후 애니메이션 작동까지 딜레이 0.1s 발생
animation을 요소마다 시간차를 두고 적용하고 싶을 때 animation-delay를 활용할 수 있다.
.div:nth-child(1) {
animation-delay: 0.1s;
}
.div:nth-child(2) {
animation-delay: 0.2s;
}
.div:nth-child(3) {
animation-delay: 0.3s;
}
.div:nth-child(4) {
animation-delay: 0.4s;
}
.div:nth-child(5) {
animation-delay: 0.5s;
}
-> 5개의 div가 시작 시점이 다르기 때문에 계속해서 애니메이션이 0.1s 간격으로 순차적으로 발동됨.
그런데 infinite로 적용되는 애니메이션에서, 한 사이클이 끝났을 때 다음 사이클 사이에는 delay가 적용되지 않았다. 그러니까 내가 원했던 것은 한 사이클이 끝나고 다음 사이클이 시작되기까지 초기상태로 1초 정도 기다렸다 시작하는거였음. 아마도 animation-delay는 맨 처음 한 번만 적용되기 때문에 원하는대로 안된듯. 이에 구글링으로 찾아본 방법은 2가지가 있었고 나는 keyframe을 활용하는 방법을 택했다.
timing-function을 조정하기
나는 ease를 사용하고 있었는데, ease보다 한 사이클이 끝나는 부분이 길게 지속되도록 커스터마이징으로 그래프를 조정하여 사용할 수 있다.
그래프 커스터마이징 해볼 수 있는 사이트
keyframe에서 한 사이클이 끝나는 단계를 늘리기
원래는 0%에서 초기값, 100%에서 변화된 상태를 넣고 끝났다면 한 단계를 더 추가하여 50%와 100% 두 단계에서 변화된 상태를 넣으면 좀 더 지속이 오래 됐다. 말로 설명하니까 이상한데... 다음 사이클이 시작되기까지의 시간이 벌린다는 말임!
@keyframes 이름 {
0% {
}
50% {
transform: 썸띵(값);
}
100% {
transform: 썸띵(값);
}
}