HTML-CSS

css3로 슬라이드 효과주기

NariNalDa 2013. 3. 22. 10:36

.before{

positioin:absolute;

left:100%;

}

.slide{

position: absolute;

-webkit-transition: left 300ms ease-in;

-moz-transition: left 300ms ease-out;

left: 0%;

}


before 클래스를 적용시켰다가 이를 없애며서 slide 클래스를 add해주면  ease-in의 효과가 나면서 슬라이드하듯 element가 움직이게 된다.


addclass, removeclass에 대해서 공부할 것 :)