요즘은 css3 애니메이션에 대응하는 브라우저(최신)가 늘고 있습니다. css3 애니메이션을 간단히 이용할 수 있는 사이트를 모아봤습니다.
사이트에서 다운로드 해서 적용할 수 있는 툴부터, 직접 움직임을 만들어낼 수 있는 생성 툴까지 함께 소개합니다.
CSS 라이브러리
CSS3AnimationCheatSheet
CSS3애니메이션을 간단히 실행할 수 있는 툴입니다. 사용법도 간단합니다. CSS파일을 다운로드해서 불러온 후, 애니메이션을 표현하고 싶은 요소에 지정된 클래스를 추가해주는 것으로 OK! CSS3의 키프레임을 사용하고 있는데, 대부분의 모던 브라우저에 대응하고 있습니다. (IE10이상 대응)
Animate.css
CSS3애니메이션을 사용할 수 있는 CSS 라이브러리입니다. 마찬가지로 CSS를 불러온 후 클래스를 추가해주는 것으로 사용 가능합니다. 애니메이션 종류도 다양해서 많은 패턴의 움직임을 적용할 수 있습니다. 「Animate.css」의 소스코드는 GitHub에도 공개되어있습니다.
MagicCSS3Animation
유머러스한 움직임이 많은 CSS라이브러리 입니다. 애니메이션의 이름도 「Magic」,「Bomb」등 독특합니다.. 적절히 사용하면 페이지에 포인트를 줄 수 있을 것 같습니다. 사용법도 간단합니다 앞서 소개한 툴들과 마찬가지로 CSS를 불러온 후 클래스ㅡㄹ 추가해주는 것으로 OK. 소스코드는 GitHub에 공개되어있습니다.
CSS 생성 툴
Ceaser
온라인상에서 만들어낼 수 있는 CSS 생성 툴입니다. 지정한 애니메이션의 CSS가 페이지에 표시 되고, 그대로 복사해서 적용할 수 있습니다. 기본으로 설정된 효과는 「Left」,「Width」,「Height」,「Opacity」의 4종류. 「linear」,「ease」등의 기본적인 것부터 여러 움직임을 만들어내는 것이 가능합니다.
CSS3KeyframesAnimation
키프레임을 사용한 애니메이션을 만들 수 있는 CSS 생성 툴입니다. 여러가지 설정이 가능하며, 작성중인 애니메이션은 그대로 재생이 가능하여, 눈으로 직접 확인하면서 설정해나갈 수 있습니다.
EasingFunctionsCheatSheet
30가지의 easing을 베지에 곡선으로 확인 가능한 온라인 툴입니다. 그래프를 클릭하면 상세 페이지가 표시되며, CSS와 SCSS, JavaScript등의 형식으로 코드가 표시됩니다.
CSS3 Transitions with custom easing functions
CSS3 Transitions with custom easing functions
버튼을 클릭하면 자동으로 여러가지 애니메이션 효과의 CSS를 생성해줍니다.
이상으로 CSS3의 애니메이션을 사용할 수 있는 툴, 라이브러리를 소개 해보았습니다. 너무 많이 사용하는 것도 좋지는 않겠지만 적절히 잘 적용하면 시선을 머물게 하는 페이지를 만드는 것이 가능하겠지요.