CSS3 에니메이션 툴 모음

CSS3의 경우 각종툴을 이용한 활용이 많을것으로 보이는데요 이중에서 CSS3를 활용한 에니메이션 효과를 다루는 어떤 툴들이 나와있고 준비중인지 한번 정리해 보았습니다.

아직은 이러한 툴들이 CSS3의 지원에 관한 PC의 경우 하위 호환 문제가 있고 모바일에서도 안드로이드쪽에서 지원되지 않는 속성들도 있지만 시간이 흐르면 웹 작업의 큰축을 담당할것 같습니다. 솔직히 하드코딩으로 각 수치를 계산해가며 작업하는건 비효율적이죠.

조금 사용해본 결과 이러한 타임라인 기반의 Animation 툴들이 배너나 프로모션 작업에 상당히 유용해 보였습니다. 아직은 초기 버전들이라 소스모드나 부족한 점이 많지만 초기 버전임에도 불구하고 꽤 활용가치가 있어 보였습니다. 왠지 다음 버전의 Dreamweaver에도 어느정도 이런 기능들이 추가되지 않을까 싶네요.

 

1. Adobe Edge (Preview버전) - Win/Mac 지원

특징 : Adobe에서 나온 툴로서 기존에 Flash 타임라인을 만저본 분이시라면 쉽게 적응할 수 있을 듯합니다. CSS3와 jQuery를 활용한 결과물로 산출해줍니다.
http://labs.adobe.com/technologies/edge/

Sample:http://labs.adobe.com/technologies/edge/resources/ Download:https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_edge (간단한 가입후 다운)

2. Sencha Animator (Beta1 버전) - Win/Mac/Linux 지원

특징 : 모바일 UI 플랫폼 센차 Touch로 유명한 Sencha에서 만든 에니메이터.
http://www.sencha.com/products/animator/

Demo: http://www.sencha.com/products/animator/demos/ Download:http://www.sencha.com/products/animator/download/ (실행시 간단한 가입 필요)

3.Hype (1.05버전)

특징 : 가장 처음 상용화한 툴로 보이며 Mac 전용. 현재 29.99달러에 판매중. 아직 사용해보진 못했지만 스크린샷에 보면 다른 툴과는 다르게 소스수정 모드도 존재.
http://tumultco.com/hype/

Sample: http://tumultco.com/hype/gallery/ Download: http://itunes.apple.com/us/app/hype/id436931759?mt=12&ign-mpt=uo%3D4

4. Animatable (출시준비중)

특징 : 안드로이드/블랙베리/iOS/WebOS등의 모바일 디바이스 호환 예정

http://animatable.com/

 

* 뱀꼬리 CSS3 속성 생성도구 페이지 모음

구글링을 조금하면 나오는 페이지중에 유용했던 페이지들을 모아봤습니다. 더 좋은 사이트가 있으면 공유 부탁드려요~! ^^

http://matthamm.com/box-shadow-curl.html (박스쉐도우를 이용한 이쁜 효과)
http://www.colorzilla.com/gradient-editor/ (그라데이션 생성 툴. 직접 생성도 가능하며 PSD에서 그라데이션을 이쁘게 잘라서 업로드 하면 색정보를 추출하여 CSS3로 변환도 시켜줍니다)
http://css3maker.com/ (종합선물세트)
http://layerstyles.org/builder.html (포토샵 속성 스타일의 레이어 스타일 툴)
http://prefixr.com/ (CSS3의 Prefix 자동 생성툴)
http://matthewlein.com/ceaser/ (easing 효과 생성기)