CSS - ANIMATION / ANIMATE.CSS 미세조정하기

CSS 로 직접 애니메이션을 구현하다보면 미세조정이라든가 부드러운 효과를 내기위해서는
더 많은 공부를 하거나 작업량이 대폭 늘것으로 예상됩니다.

css 라이브러리로 지원되는 ANIMATE.CSS 라는 파일이 있습니다.
깃허브에서 다운로드 받거나 첨부파일을 다운로드 하여 압축을 풀어 줍니다.
해당 ANIMATE.CSS 에 대한 사용법에 대해서 설명하는 시간을 가져보도록 하겠습니다.

우선 데모를 확인해주세요
http://ety.kr/ex/css/css_animation_03.html

위의 주소에 있는 효과를 내는것인데 직접 만든것보다 깔끔하고 효과도 더 좋지 않나요?
우선 ANIMATE 의 사용법에 대해서 설명해드리면

<link rel="stylesheet" type="text/css" href="css/animate.min.css">
위처럼 스타일 시트 링크를 걸어주면 끝입니다.

효과줄 해당 엘리먼트에 CLASS 를 추가합니다.
<h1 id="e1" class="animated infinite bounce delay-2s">ETY.KR</h1>
위처럼 class 값을 새로 추가했습니다.
animated(널사용하겠다) infinite(무한반복) bounce(바운스효과) delay-2s(딜레이시간)
위처럼 이해하시면 됩니다.

그럼 animate 사이트로 이동을 해보도록 하겠습니다.
https://daneden.github.io/animate.css/
보시는것처럼 해당 효과들이 존재 합니다.
클래스값만 아래처럼 바꿔주면 됩니다.
<h1 id="e1" class="animated infinite flash delay-2s">ETY.KR</h1>

[미세조종하는방법]

해당 animate css 의 기본속도는 좀 빠르게 때문에 애니메이션의 속도를 줄여야 하는 일이 생겼습니다. 

바운스가 빠르게 뛰는걸 볼 수 있습니다.
<h1 id="e1" class="animated infinite bounce delay-2s">ETY.KR</h1>

e1 이라는 id 값에 아래처럼 추가해주시면 속도가 좀 느려지는것을 확인할 수 있습니다.

#e1{

animation-duration: 1.5s;

animation-delay: 2s;

animation-iteration-count: infinite;

}

위 모든것을 직접 수정하려면 키프레임이라든가 속도제어부분,화면의 부드러운 효과를 내기위해서
이것저것 코드가 많이 들어가게 되지만 animate 를 사용하면 간단하게 해결 할 수 있습니다.