transition _CSS

transition

• 요소의 변화를 일정 기간(duration)동안 일어나게 함
• 자동으로 발동되지 않음 (hover나 onclick 같은 이벤트 트리거에 의해 동작함)

사용법

.sqare {
    width: 100px;
    height: 100px;
    background-color: red;
  
// 트랜지션의 대상이 되는 프로퍼티를 지정 (기본값 all)
    transition-property: width, background-color; 
  // 변화가 일어나는 기간. 초단위. 프로퍼티와 각각 대응 (기본값 0s)  
  transition-duration: 1.2s, 3s 
    
  // 트랜지션 변화율 함수 지정 (기본값 ease)
  transition-timing-function: ease; 
  
  // 트리거 이벤트 발생 후 몇 초 후에 트랜지션이 시작될 것인지 지정 (기본값 0s)
    transition-delay: 1s; 
    transition : (shorthand)
}

.sqare:hover {
    width: 300px;
    background-color: blue;
}