CSS 시간 변형

(2021-03-12)

CSS 속성 전환, CSS 변형 속성, CSS 특수 효과


1. transition 속성

  ㅇ 모습/모양을 바꾸는(이행,전이,변형,재생 등) 효과를 주는 속성
     - background,color,height,width,transform 등의 CSS 속성을, 
     - 정해준 시간 동안 또는 부드럽게 또는 빠르게 또는 점차적으로 변하도록 하는 속성

  ㅇ 적용 가능 대상 속성
     - 위치 : top, left, bottom, right
     - 크기 : width, height
     - 박스 : margin, padding
     - 외곽선 : border-width, border-radius, border-color
     - 색상 : color, background-color
     - 투명도 : opacity
     - 변환 : transform

  ㅇ transition 속성의 구분
     - transition-property : 어떤 속성들에 전환(변형,재생) 효과를 줄 것인가를 지정함
        . 例) transition-property : transform;
     - transition-duration : 몇 초 동안 전환(변형,재생)할 지를 지정
        . 例) transition-duration: 2s; /* 2초 동안 변형 속성이 적용됨 */
     - transition-timing-function : 변형 속도감을 지정 
        . linear : 등속
        . ease : 빠른 실행을 한 다음에, 느린 종료
        . ease-in : 점점 빨라짐
        . ease-out : 점점 느려짐
        . ease-in-out : 느린 시작, 보통 속도, 느린 종료 
     - transition-delay : 이벤트 발생 후 몇 초 후 전환(재생)할 지를 지정

     - transition : 모든 transition 속성을 한번에 지정하는 단축 문법
        . transition: <property> <duration> <timing-function> <delay>;
        . 例) transition: width 2s, height 2s, background-color 2s, transform 2s;

특수효과 (변형)
   1. CSS 시간 변형   2. CSS 2차원 변형  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"