CSS3 애니메이션을 쉽게 사용 가능한 온라인 툴 소개

SHARE

요즘은 css3 애니메이션에 대응하는 브라우저(최신)가 늘고 있습니다. css3 애니메이션을 간단히 이용할 수 있는 사이트를 모아봤습니다.
사이트에서 다운로드 해서 적용할 수 있는 툴부터, 직접 움직임을 만들어낼 수 있는 생성 툴까지 함께 소개합니다.

CSS 라이브러리

CSS3AnimationCheatSheet

CSS3AnimationCheatSheet
CSS3AnimationCheatSheet

CSS3애니메이션을 간단히 실행할 수 있는 툴입니다. 사용법도 간단합니다. CSS파일을 다운로드해서 불러온 후, 애니메이션을 표현하고 싶은 요소에 지정된 클래스를 추가해주는 것으로 OK! CSS3의 키프레임을 사용하고 있는데, 대부분의 모던 브라우저에 대응하고 있습니다. (IE10이상 대응)

Animate.css

Animate.css
Animate.css

CSS3애니메이션을 사용할 수 있는 CSS 라이브러리입니다. 마찬가지로 CSS를 불러온 후 클래스를 추가해주는 것으로 사용 가능합니다. 애니메이션 종류도 다양해서 많은 패턴의 움직임을 적용할 수 있습니다. 「Animate.css」의 소스코드는 GitHub에도 공개되어있습니다.

MagicCSS3Animation

MagicCSS3Animation
MagicCSS3Animation

유머러스한 움직임이 많은 CSS라이브러리 입니다. 애니메이션의 이름도 「Magic」,「Bomb」등 독특합니다.. 적절히 사용하면 페이지에 포인트를 줄 수 있을 것 같습니다. 사용법도 간단합니다 앞서 소개한 툴들과 마찬가지로 CSS를 불러온 후 클래스ㅡㄹ 추가해주는 것으로 OK. 소스코드는 GitHub에 공개되어있습니다.

CSS 생성 툴

Ceaser

Ceaser
Ceaser

온라인상에서 만들어낼 수 있는 CSS 생성 툴입니다. 지정한 애니메이션의 CSS가 페이지에 표시 되고, 그대로 복사해서 적용할 수 있습니다. 기본으로 설정된 효과는 「Left」,「Width」,「Height」,「Opacity」의 4종류. 「linear」,「ease」등의 기본적인 것부터 여러 움직임을 만들어내는 것이 가능합니다.

CSS3KeyframesAnimation

CSS3KeyframesAnimation
CSS3KeyframesAnimation

키프레임을 사용한 애니메이션을 만들 수 있는 CSS 생성 툴입니다. 여러가지 설정이 가능하며, 작성중인 애니메이션은 그대로 재생이 가능하여, 눈으로 직접 확인하면서 설정해나갈 수 있습니다.

Stylie

Stylie
Stylie

마찬가지로 온라인상에서 직접 작성할 수 있는 CSS 생성 툴입니다. 화면 전체가 프리뷰 화면으로 직접 작성한 움직임을 확인하면서 만들 수 있습니다.

liffect effect for lists

liffect effect for lists
liffect effect for lists

이미지를 여러가지 효과로 움직임을 주는 CSS를 간단히 생성할 수 있습니다.

EasingFunctionsCheatSheet

EasingFunctionsCheatSheet
EasingFunctionsCheatSheet

30가지의 easing을 베지에 곡선으로 확인 가능한 온라인 툴입니다. 그래프를 클릭하면 상세 페이지가 표시되며, CSS와 SCSS, JavaScript등의 형식으로 코드가 표시됩니다.

CSS3 Transitions with custom easing functions

CSS3 Transitions with custom easing functions
CSS3 Transitions with custom easing functions

버튼을 클릭하면 자동으로 여러가지 애니메이션 효과의 CSS를 생성해줍니다.

이상으로 CSS3의 애니메이션을 사용할 수 있는 툴, 라이브러리를 소개 해보았습니다. 너무 많이 사용하는 것도 좋지는 않겠지만 적절히 잘 적용하면 시선을 머물게 하는 페이지를 만드는 것이 가능하겠지요.

스폰서 링크

댓글

  1. gilynh 댓글:

    오우 요즘 에니메이션 기능에 한참 몰두하고 있는데 좋은 사이트 많네요^^
    감사합니다. 나나티님!

    • nanati 댓글:

      앗~ 오셨군요 ^^ 댓글까지 감사드려요~
      도움이 되었으면 좋겠네요~
      (사실 제 자료창고 같은 블로그 ㅋㅋ)

  2. ALy 댓글:

    안녕하세요. 작업중에 이것저것 둘러보다 우연히 들르게 되었어요.
    紹介文の立場・環境などが私と似た感じでこうやってコメ残します。
    私はウェブはもちろん、offのクリエイターとしても活動中です。
    他国だけどお互いに頑張りましょうね!

    • nanati 댓글:

      엄뭐! 반갑습니다 ^^ 어떻게 찾아오셨나요;; ㅎ
      부끄럽네요… 소개한다는 식으로 블로그를 쓰고는 있지만
      실은 제 자료창고같은 곳입니다…ㅎㅎ
      댓글까지 달아주시고 감사해요!
      화이팅!! ^^