[javascript] 자바스크립트로 작동하는 파도 애니메이션을 다른 애니메이션과 조합하여 사용하는 예시 구현 방법
자바스크립트를 사용하여 파도 애니메이션을 만들고, 다른 애니메이션과 함께 사용하는 방법을 소개합니다.
1. 파도 애니메이션 만들기
파도 애니메이션을 만들기 위해 CSS @keyframes를 사용할 수 있습니다. 아래 예시에서는 wave라는 이름의 애니메이션을 만들어보겠습니다.
@keyframes wave {
0% { transform: scaleY(1); }
50% { transform: scaleY(0.5); }
100% { transform: scaleY(1); }
}
이렇게 작성한 애니메이션 코드는 파도가 0%에서 원래 크기로 시작하여 50%에서 절반 크기로 축소되었다가 다시 100%에서 원래 크기로 돌아오는 애니메이션을 만듭니다.
2. 파도 애니메이션과 다른 애니메이션 조합하기
파도 애니메이션을 다른 애니메이션과 조합하여 사용하는 방법은 여러 가지가 있습니다. 예를 들어, translateX 애니메이션과 함께 사용하는 방법을 살펴보겠습니다.
@keyframes wave-translateX {
0% { transform: scaleX(1) translateX(0); }
50% { transform: scaleX(0.5) translateX(50%); }
100% { transform: scaleX(1) translateX(0); }
}
.element {
animation: wave 2s ease infinite, wave-translateX 5s ease infinite;
}
위 예시에서는 wave 애니메이션과 wave-translateX 애니메이션을 .element에 적용하고 있습니다. 이렇게 함께 적용되면 파도 애니메이션은 수평으로 이동하면서 크기 변화도 일어납니다.
3. 추가적인 조합 방법
파도 애니메이션과 다른 애니메이션을 조합하는 방법은 다양합니다. 몇 가지 추가적인 예시를 소개합니다.
Opacity 애니메이션과 조합하기
@keyframes wave-opacity {
0% { transform: scaleY(1); opacity: 1; }
50% { transform: scaleY(0.5); opacity: 0.5; }
100% { transform: scaleY(1); opacity: 1; }
}
.element {
animation: wave 2s ease infinite, wave-opacity 3s ease alternate infinite;
}
Rotate 애니메이션과 조합하기
@keyframes wave-rotate {
0% { transform: scaleX(1) rotate(0deg); }
50% { transform: scaleX(0.5) rotate(180deg); }
100% { transform: scaleX(1) rotate(0deg); }
}
.element {
animation: wave 2s ease infinite, wave-rotate 4s linear infinite;
}
위 예시들처럼 다른 애니메이션과 파도 애니메이션을 조합하여 다양한 효과를 만들어낼 수 있습니다.