제주에서 작은 IT 사업을 하고 있는 유지 아빠가 보고 듣고 느끼는 진솔한 이야기를 나누는 공간입니다.

웹 & IT/웹표준 HTML, CSS & PHOTOSHOP

47개의 놀라운 CSS3 애니메이션

유지아빠 2012. 3. 2. 15:45
web designer wall에 있는 article을 기반으로 작성하였습니다.
따라서 이 article에 소개된 예제의 저작권은 web designer wall 에 있습니다.


CSS3 기능 중에서 가장 놀라운 기능 중 하나가 CSS3 애니메이션 속성입니다.
하지만 CSS3 애니메이션은 최신 버전의 IE9에서도 지원하지 않습니다.
이 페이지에 있는 예제들은 사파리 또는 구글 크롬과 같은 webkit 계열 브라우저에서 완벽하게 지원합니다.

하지만 IE10에서는 CSS3 애니메이션 속성이 지원된다고 합니다. 따라서 지금부터 학습을 해두면 많은 도움을 받을 수 있습니다. CSS3 애니메이션의 특징은 CSS3의 속성을 이용해 애니메이션을 하는 것으로 간단한 애니메이션일 경우 자바스크립트 코드 한줄도 안쓰고 놀라운 효과를 만들어 낸다는 것입니다.

현재는 jQuery 또는 Motools, Prototype 과 같은 자바스크립트 라이브러리를 사용하거나, 직접 자바스크립트 코드를 작성해야 했습니다. 하지만 CSS3 애니메이션은 이런 자바스크립트 코드 한 줄 들어가지 않고 놀라운 효과를 내는 것입니다.

아래의 예제는 놀라운 CSS3 애니메이션을 볼 수 있습니다.
반드시 해당 예제의 소스 보시를 통해 어떻게 작동되는지 살펴 보는 것도 도움이 될 것입니다.

 

CSS3 Clock With jQuery

css3 clock

Analogue Clock

analogue clock

3D Cube That Rotates Using Arrow Keys

3d cube

Multiple 3D Cubes (Slide In/Out)

multiple 3d cubes

CSS3 Accordion

css3 clock

Auto-Scrolling Parallax

auto scrolling parallax

Isocube

isocube

Image Gallery

image gallery

Matrix

matrix

7 Javascript-effect Alternatives Using CSS3

javascript effect alternatives

Image Hover Effects

css3 clock

Turning Coke Can (Control With Scrollbar)

coke can

3D Meninas

3d meninas

Polaroid Gallery

polaroid gallery

Space

Note: this one is graphic intense and takes a while to load, but the result is crazy!

space

Mac Dock

css3 clock

Drop-In Modals

drop in modals

Sliding Vinyl

sliding vinyl

Zooming Polaroids

zooming polaroids

Animated Rocket

animated rocket

Poster Circle

poster circle

Morphing Cubes

morphing cubes

Falling Leaves

falling leaves

Animated Polaroid Gallery

polaroid gallery

Spotlight Cast Shadow

spotlight cast shadow

Colorful Clock

colorful clock

Lightbox Gallery (Draggable)

css3 clock

Elastic Thumbnail Menu

elastic thumbnail menu

Coverflow

coverflow

Snowflakes

snow

jQuery DJ Hero

dj hero

Dynamic Stacking Cards

stacking cards

Another Image Gallery

image gallery

Snow Stack (Control With Arrow Keys)

snow stack

Animated Pricing Column

animated pricing column

Slick jQuery Menu

slick jquery menu

CSS3

sticky notes

CSS Tabs Without Javascript

css tabs

Tab Menus Without Javascript

tab menus

SVG Fisheye Menu

fisheye menu

Dynamic Presentation Without Flash

dynamic presentation

Rotating Gallery

rotating gallery

Dropdown Menu

dropdown menu

Another Fisheye

fisheye

Frame-by-Frame Animation (Hover to Play)

css3 animation

Another Accordion

another accordion

AT-AT Walker (No Flash or Javascript)

css3 animation walker