CSS3의 애니메이션 속성을 이용한 Simple Multi-Item Slider

CSS3의 속성 중 가장 인상적인 것이 animation 속성과 transition 속성입니다.

이 속성을 이용하면 자바스크립트를 사용하지 않더라도, 아주 멋있는 애니메이션을 만들 수 있습니다.

지금 여기 소개하는 웹 페이지도 CSS3 의 animation 속성과 transition 속성을 이용해서 만든 결과 물인데, 상당히 인상적인 효과를 줄 수 있습니다. 자바스트립트를 사용하지 않기 때문에 브라우저에 무리가 없으며, 브라우저에서 자바스크립트를 비활성화 하더라도 작동하기 때문입니다. 다만 해당 속성이 제대로 작동하기 위해선 CSS3를 완벽하게 지원하는 브라우저가 필요합니다. 

IE 계열은 IE10이 유일하게 CSS3 속성을 전부 지원합니다. 

하지만 파이어폭스 및 크롬 및 사파리인 경우 최신 버전만 설치하면 완벽한 애니메이션을 볼 수 있기 때문에 해당 효과를 보길 원하시면 저는 크롬 또는 파이어폭스를 이용하라고 하고 싶습니다.

해당 사이트는 http://tympanus.net/Tutorials/ItemSlider/ 입니다.

또한 아래의 URL 에서 소스코드를 얻을 수 있습니다.

http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/