CSS-transition

 

 

css - transition

 

 

 

 

 

a{
font-size : 3rem;
display : inline-block;
transition-property : all;
transition-duration : 1s;
=
  (transition : all 1s ease; )
}


a:active{
transform: translate(20px,20px);
font-size : 2rem;
}



ㄴ a:active{} 는  a태그가 클릭되었을때 적용할 속성, (hover는 마우스가 위에있을때, visited는 이미방문한 링크)

ㄴ transfrom 속성은 block과 inline-block에만 적용된다. inline 속성에는 적용안됨

ㄴ 그래서 display에 inline-block 지정

ㄴ transition-property 는 transition을 적용할 속성의미. all은 모든 속성에 적용

ㄴ transition-duration은 지속시간. 개별속성에 다른 지속시간 지정가능

ㄴ transition-delay는 시간지연. n초뒤 적용

ㄴ transition-timing-function은 transition이 적용되는 가속도 함수 지정

ㄴ linear는 가속도 일직선, ease 자연스러움.


ㄴ*transition 속성은 display와 호환되지 않는다 그래서 이를 쓸떄는 display속성은 사용하지 않는다

 

 

*사이드 메뉴창 만들기

ㄴtransition과 display속성은 같이 쓰지않는다

ㄴ펼쳐지는 메뉴창을 만들기

(display X)
position:fixed
left : -250px;
transition : all 0.5s ease;
로해놓고

ㄴ 클릭시 left: 0px로하여 나타나게끔한다