animation delay
-
키프레임 에니메이션을 지연시키는 새로운 방법CSS 2020. 10. 18. 09:52
CSS @keyframes 애니메이션의 각 반복 사이에 일시 중지를 추가하고 싶었다면 CSS에서 이를 수행하는 기본 제공 방법이 없다는 사실에 실망했을 것입니다. 물론 애니메이션 지연을 사용하여 @keyframe 집합의 시작을 지연할 수 있지만 키 프레임을 통한 첫 번째 반복과 각 후속 실행 사이에 시간을 추가할 방법은 없습니다. 기본적인 방법은 다음과 같습니다. /* scss */ @for $i from 1 through 20 { &:nth-child(#{$i}) { $delay: random(9999) + 0ms; top: calc(50% - #{random(400) - 200px}); left: calc(50% - #{random(300) + 0px}); animation-delay: $delay;..