CSS의 여러가지 애니메이션 효과 예시를 모아놓은 사이트와 라이브러리를 소개하고, 간단한 예시 코드를 작성해보겠습니다 ~
1. Animista
https://animista.net/play/basic/scale-up/scale-up-center
다양한 애니메이션 효과 예제들을 보여주고, 시간이나 횟수 등을 사용자가 직접 설정할 수 있습니다
뿐만 아니라 css 코드를 제공하여 손쉽게 사용할 수 있는것이 큰 장점입니다.
Entrance 탭의 ROLL-IN, roll-in-left 효과를 적용해보겠습니다.
iteration-count를 2로 지정하면 2번 효과가 나타나게 했습니다.
여기서 추가로 왼쪽으로 굴러온 다음 다시 왼쪽으로 굴러 나가는 것까지 해보겠습니다.
Animista 사이트를 참고해서 만들었기 때문에 저도 자세한 CSS 원리는 아직 모릅니다 ㅎ^^ㅎ
추후에 공부하여 글 업로드해보겠습니다
2. Animate.css
https://animate.style/
이것도 Animista와 비슷하게 여러 애니메이션 효과를 보여주고 사용자가 선택해서 사용할 수 있습니다.
다른점은 Animate.css을 설치하여 사용하고, 요소의 class에 효과 이름을 넣어 애니메이션을 적용하는 방식입니다.
vue2 기반에서 사용한는 코드를 작성해보겠습니다.
// animate 설치
npm install Animate.css
사이트 오른쪽의 메뉴 중 ligntSpeedInRight 효과를 사용해보겠습니다.
클래스명에 animate_animated 을 추가하여 animate 스타일 적용할 요소임을 나타냅니다.
lightSpeedInRight 효과를 적용하기 위해 animate_lightSpeedInRight 클래스명을 추가합니다.
animate_repeat-3 클래스를 추가하면 애니메이션을 3회 반복합니다.
animate는 이렇게 클래스 명을 활용하여 간단하게 효과를 적용할 수 있습니다.
2-1. Animate.css 응용하기
클래스명과 event listener를 사용하여 lightSpeenInRight과 lightSpeedOutLeft를 연결하여 무한 반복하는 예제를 해보겠습니다.
<script>
loading.addEventListener('animationend', () => {
if (loading.className === 'box animate__animated animate__lightSpeedInRight') {
loading.className = 'box animate__animated animate__lightSpeedOutLeft';
} else {
loading.className = 'box animate__animated animate__lightSpeedInRight';
}
});
</script>js에 이벤트 리스너 코드를 보시면, animationed 이벤트가 발생했을 때 해당 코드가 실행되도록 하였습니다.
id 요소를 사용해 dom 요소의 class가 lightSpeenInRight이면 lightSpeedOutLeft로 변경,
lightSpeedOutLeft이면 lightSpeenInRight로 변경하여 애니메이션이 반복적으로 적용됩니다.
