간단하게 애니메이션 적용하기
최근 급하게 코딩 작업을 하고 있는데 그럴때 애니메이션 작업을 할 때도 있죠. 제가 직접 하나하나 다 작업할 수는 없고 간단하고 퀄리티 높은 애니메이션 작업을 하고 싶을 때 바로 https://animista.net에서 도움을 많이 받고 있습니다.
먼저 동그라미 메뉴를 눌러서 애니메이션을 선택하고 바로 밑에 애니메이션의 방향을 설정합니다. 왼쪽 오른쪽 기타 등등.. 있습니다. 눌러보시면 바로 아실 수 있습니다. 그리고 좌측에 OPTIONS에서 Duration 속도와 Delay를 통해 몇초 뒤에 시작할지 그리고 infinite를 체크하면 무한 반복을 설정할 수 있죠. 그리고 코드 확인 버튼(이미지참고)을 눌러주세요!
CSS에 클래스와 키프레임을 복사해서 붙여 넣으시고 내가 적용하고 싶은 부분에 클래스명을 써주시면 애니메이션 적용이 됩니다! 예를 들면 아래와 같이 간단하게 사용할 수 있죠.
<div class="애니메이션클래스"><img src="...">or TEXT</div>급하게 사용하기에 좋습니다! 다만 조금 아쉬운 점(?)은 애니메이션 중첩이 안되는 것 같습니다. 예를들면 Bounce를 넣고 다은 Swing을 넣고 싶어도 둘중 하나만 선택이 가능하다라는 점이 있습니다. 물론 방법이 있을 것 같은데 저는 잘 모르겠네요.. 😥 혹시 아시는 분이 계시다면 댓글로 알려주시면 감사할 것 같아요.. ❤