transition

• transition은 자동으로 발동되지 않고 :hover와 같은 가상 클래스 선택자 또는 JavaScript의 부수적인 action에 의해 발동된다

• transition-duration : transition의 지속 시간 (default : 0)
  
  
• transition-delay : property 변화 시점과 transition 시작 사이 대기하는 시간 (default : 0)
  
  
• transition-timing-function : transition의 변화 속도 (default : 0)
  
  
• transition-property : transition이 적용될 속성 (default : all)
  
  

😄 code 1. duration

/*HTML*/
<div class="box"></div>
/*CSS*/
.box {
	width: 100px;
    height: 100px;
    background-color: black;
    /*width는 2초뒤, background-color는 4초 뒤 변화*/
    transition-duration: 2000ms, 4s;
    transition-property: width, background-color;
    /*duration과 property 묶기*/
    transition : all, 2000ms
}
/*클래스명이 box인 요소에 커서 올릴 때 너비를 200px, 배경색을 빨강으로 변경*/
.box:hover {
	width: 200px;
	background-color: red;
}

• 1000ms = 1s

• transition-duration과 transition-property는 1:1 대응

  • 첫번째 duration이 첫번째 property에 적용, 두번째 duration이 두번째 property에 적용

• transition 순서 중요, 위의 코드에서 hover에 width와 background-color 순서를 바꾸면 오류 발생

• duration과 property를 묶어서 한번에 표현 가능

😄 code 2. timing-function

/*HTML*/
<div class="box"></div>

/*CSS*/
.box {
	width: 100px;
    height: 100px;
    background-color: black;
    /*모든 속성의 transition 지속시간 2초*/
    transition: all 2s;
    transition-timing-function: ease-in;
}
.box:hover {
	width: 200px;
    background-color: red;
}

• linear : 일정한 속도

• ease : 기본값으로 시작하여 속도가 증가하다가 마지막에 감소

• ease-in : 천천히 시작해서 속도가 조금씩 증가

• ease-out : 빠르게 시작해서 속도가 조금씩 감소

• ease-in-out : 천천히 시작해서 속도가 증가했다가 감소

• cubic : transition이 사용자가 정의한 cubic-bezier 함수에 따라 진행

  • cubic-bezier 만드는 사이트 : cubic-bezier

😄 code 3. delay

/*HTML*/
<div class="box"></div>

/*CSS*/
.box {
	width: 100px;
    height: 100px;
    background-color: black;
    /*모든 속성의 transition 지속시간 2초*/
    transition: all 2s;
    /*5초 대기 후 transition*/
    transition-delay: 5s;
}
.box:hover {
	width: 200px;
    background-color: red;
}

😄 code 4. transition (한꺼번에 적용)

/*HTML*/
<div class="box"></div>

/*CSS*/
.box {
	width: 100px;
    height: 100px;
    background-color: black;
    /*모든 property에 transition을 2초의 지연시간 후 ease 속도로 1초의 지속시간 부여*/
    transition : all 1s ease 2s;
}
.box:hover {
	width: 200px;
    background-color: red;
}

• transition : property duration timing-function delay
  • 생략한 곳에는 기본값이 적용되며 duration은 생략 불가능하다 (기본값이 0이어서 transition이 실행 안됨)

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍