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;
&::before,
&::after {
animation-delay: $delay;
}
}
@keyframes shooting {
0% {
transform: translateX(0);
}
50%, 100% {
transform: translateX(300px);
}
}
이 접근 방식에는 반복 사이의 지연 시간을 파악한 다음 키 프레임을 100%의 일부로 압축하는 것이 포함됩니다.
그런 다음 일시 중지를 달성하기 위해 100%에 도달할 때까지 애니메이션의 최종 상태를 유지합니다.
@keyframes my-animation {
/* Animation happens between 0% and 50% */
0% {
width: 0;
}
15% {
width: 100px;
}
/* Animation is paused/delayed between 50% and 100% */
50%, 100% {
width: 0;
}
}
이 접근방식의 가장 큰 단점을 경험했습니다.
각 키 프레임을 수동으로 조정해야하는데 약간의 고통이 있고 오류가 발생하기 쉽습니다.
또한 모든 키 프레임을 100% 백업까지 옮겨야 하는경우 애니메이션이 수행하는 작업을 이해하기가 더 어렵습니다.
새로운 기술 : 지연 시간 동안 숨기기
또 다른 기술은 지연시간 동안 애니메이션을 숨기는 역할을하는 새로운 @keyframe 세트를 만드는 것입니다.
그런 다음 원본 애니메이션과 동시에 적용하십시오.
.target-of-animation {
animation: my-awesome-beboop 1s, pause-between-iterations 4s;
}
@keyframes my-awesome-beboop {
...
}
@keyframes pause-between-iterations {
/* 위의 애니메이션은 25%동안 보여집니다. */
0% {
opacity: 1;
}
25% {
opacity: 1;
}
/* 위의 애니메이션은 나머지 75%동안은 가려집니다. */
25.1% {
opacity: 0;
}
100% {
opacity: 0;
}
}
이 기술의 한계는 애니메이션 사이의 일시중지가 "일시중지된" 키프레임의 정수 배수여야한다는 것입니다.
동일한 요소에 더 오래 실행되는 키프레임이 적용 되더라도 무한 반복되는 키프레임은 즉시 다시 실행되기 때문입니다.
@keyframes shooting {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
@keyframes pause-animation {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
50.1% {
opacity: 0;
}
100% {
opacity: 0;
}
}
이와 같이 적용해볼 수 있겠습니다.
만약 그렇다면 딜레이 시간동안 숨기고 싶지 않다면 어떨까요?
translateX를 사용하는 경우는 다음과 같이 사용할 수 있습니다.
@keyframes slide-right {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
/* pausing the animation for three iterations */
@keyframes slide-left-pause {
25%, 50%, 75% {
left: 0;
}
37.5%, 62.5%, 87.5% {
left: -100px;
}
100% {
left: 0;
}
}
일시 중지 중에 약간의 흔들림이 발생할 수 있습니다.
위의 translateX 예제에서 애니메이션이 우위를 차지하기 위해 서로 충돌이 있기 때문에 일시 중지중에 공에 약간의 진동이 있습니다.
결론적으로 가장 좋은 방법은 지연시간 동안 숨기는 것입니다.
더 좋은 방법이 있다면 댓글로 부탁드립니다!
출처 : css-tricks.com/a-new-way-to-delay-keyframes-animations/
'CSS' 카테고리의 다른 글
css variables? css 변수 사용하기 (0) | 2021.01.11 |
---|---|
CSS로 가운데 맞추기 (0) | 2021.01.03 |
clamp() 사용하기 (0) | 2020.10.11 |
사용자 정의 속성 사용 custom properties (Global CSS ) (0) | 2020.09.21 |
height 100vh ios 이슈 해결방법 -webkit-fill-available (0) | 2020.09.20 |
댓글