CSS로 쉽게 animation을. (in 사파리)
어제 만우절날 CSS3-IE 에 놀라신 분들게 죄송한 마음으로 이번에는 제대로된 포스팅을 올립니다.
사파리 블로그에 이미 소개 되었는지라 많은 분들이 아실지도 모르지만 CSS Animation 이라 불리우는 역동적인 CSS 부분들이 이번 3.1에 첨가되었고 그 중에서도 Transition (전환) 에 관한 것들이 구현 가능케 되었습니다. [이하의 모든 예제들은 사파리 3.1이 설치되어 있어야 확인하실수 있습니다.]
transition-property - 어떠한 전환 속성을 작동시킬 것인지 지정 예: opacity transition-duration - 얼마동안 이 속성이 지속될것인지 지정ow long the transition should last. transition-timing-function - 어떠한 종류의 타이밍을 갖을것인지 지정. 예: linear vs. ease-in vs. a custom cubic bezier function transition - 물론 한번에 지정가능한 속성도 제공하는군요.
위의 div 에 마우스를 가져다 대시면 천천히 div 가 사라지는 효과를 확인하실수 있습니다. 이는 div 에다 div {opacity: 1; -webkit-transition: opacity 1s ease-in; } 값을 정해준 후 hover 시에 opcity 가 0으로 되도록 지정된 결과 입니다. div:hover {opacity: 0;}
이 외에도 여러가지 효과를 줄수 있는데 간단한 transition 속성으로 많은 이득을 볼수 있습니다.
- Home
- About
- Contact
실무적으로야 아직 쓰이지는 못하겠지만 여러가지 생각해 볼수 있는 부분인거 같네요. 이번에 Torrey Rice가 이 CSS Animation 기능을 활용해서 SVG 와 함께 멋진 동작 예제를 구현해 놓았습니다. 설명을 곁들여서 보시면 이해가 더 쉬우실 겁니다.