Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy! Nick La씨가 취합한 CSS3 애니메이션 데모 47개 입니다. 다양한 방법으로 CSS3의 속성을 이용한 자바스크립트 애니메이션 사용법들을 제시합니다. 지금까지 SVG나 Canvas요소로밖에 표현할 수 없었던 많은 부분을 CSS3로 해결하고 있습니다. 아래의 데모를 정상적으로 조회하기 위해서는 CSS3를 지원하는 사파리, 크롬, 파이어폭스 브라우저를 필요로 합니다. CSS3 Clock With jQuery
Analogue Clock
3D Cube That Rotates Using Arrow Keys
Multiple 3D Cubes (Slide In/Out)
CSS3 Accordion
Auto-Scrolling Parallax
Isocube
Image Gallery
Matrix
7 Javascript-effect Alternatives Using CSS3
Image Hover Effects
Turning Coke Can (Control With Scrollbar)
3D Meninas
Polaroid Gallery
SpaceNote: this one is graphic intense and takes a while to load, but the result is crazy!
Mac Dock
Drop-In Modals
Sliding Vinyl
Zooming Polaroids
Animated Rocket
Poster Circle
Morphing Cubes
Falling Leaves
Animated Polaroid Gallery
Spotlight Cast Shadow
Colorful Clock
Lightbox Gallery (Draggable)
Elastic Thumbnail Menu
Coverflow
Snowflakes
jQuery DJ Hero
Dynamic Stacking Cards
Another Image Gallery
Snow Stack (Control With Arrow Keys)
Animated Pricing Column
Slick jQuery Menu
CSS3
CSS Tabs Without Javascript
Tab Menus Without Javascript
SVG Fisheye Menu
Dynamic Presentation Without Flash
Rotating Gallery
Dropdown Menu
Another Fisheye
Frame-by-Frame Animation (Hover to Play)
Another Accordion
AT-AT Walker (No Flash or Javascript)
takeone 대단하다는 말밖에는... IE만 쇼부가 쳐지면 되겠군요 ㅎㅎ |
Posted on 2010/02/04 14:29
Filed Under Development
TAG : animation
트랙백 주소 : http://www.takeone.pe.kr/trackback/257
Categories
|
