CSS transition

transition 스르륵 

   property duration [timing-function] [delay]     

                                                                 * [  ] 생략가능

·property : CSS 속성을 뜻함

 

·duration : 유지기간 m ms     1000ms ===1s(초)                

         ex) transition : font-size 2500ms;      -> 2.5초

 

·timing-function : 변화속도 지정

      ease-in │  ease-out  │  ease-in-out  │cubic-bezier  │

     천천-휙       휙-천천        직접가속도제어(cubic-bezier.com)

         ex) transition : all 2500ms ease-in;

 

delay : 몇초 후에 일어났음 좋겠는지 지정 m / ms

         ex) transition : all 2500ms ease-in 1000ms

 

더 섬세하게 각 속성마다 다른 변화 주고싶다면 !

         ex) transition : font-size 1000ms ease-out,

                             background-color 2000ms cubic-bezier(x,y,z,a);

                            속성 부분에 all 말고 따로따로 작성  연결은 반드시 ,으로 !

 

ex) box-shadow transtion 

 

 

 

+input tip : 

focus 될때 outline 무조건 생김 

none시켜줘야 깔끔