[CSS] 변환과 전환 (Transformations & Transitions)

 

1. 변환 Transformations

요소의 모양을 이동하거나 변경하는 것 (ex. hover)

 

변환은 transform 속성을 사용하는데 이 속성은 변환하려는 요소에 추가하는 것이 아니라, 변환을 발생시키는 요소에 추가한다. 아래 예시를 통해 다시 살펴보자.

 

.card-container {
  background-color: rgb(255, 255, 255);
  width: 350px;
  margin: 50px auto;
  box-shadow: 3px 3px 10px rgb(201, 200, 200);
}

.card-container:hover {
  transform: scale(1.05);
}

 

변환하려는 요소는 .card-container이지만 여기에 transform 속성을 추가하는 것이 아니고, .card-container 요소의 변환을 발생시키는 요소인 .card-container:hover에 추가하는 것이다.

 

 

 

 

2. 전환 Transitions

transformation 등의 상태 변화에 애니메이션을 부여하여 부드럽게 전환하는 것

 

전환은 css 변환 방식을 지정해주는 것이다. 위의 변환 예시에서 .card-container:hover에 transform: scale(1.05)를 지정해주면 .card-container에 마우스를 올리자마자 해당 요소의 크기가 1.05배 커지는데, 이 변화를 트랜지션을 통해 좀 더 부드럽게 보이도록 설정해줄 수 있다.

전환은 transition 속성을 사용한다. 전환은 변환과 다르게 변환을 발생시키는 요소가 아닌 변환하려는 원래의 요소에 적용한다. 전환이 정의된 요소에 중첩되어 있는 요소에도 적용할 수 있다.

 

.card-container {
  background-color: var(--sample-variable);
  width: 350px;
  margin: 50px auto;
  box-shadow: 3px 3px 10px rgb(201, 200, 200);
  transition: transform 0.2s ease 0.1s;
}

.card-container:hover{
    transform: scale(1.05);
}

 

transition 속성은 .card-container:hover가 아닌 .card-container , 그러니까 변환하고자 하는 원래 요소에 추가한다.

 

 

(1) property

전환을 적용하려는 속성. transform 외에도 background-color 등 다양한 속성을 적용할 수 있다.

 

(2) duration

property 속성의 변화가 얼마나 지속될 지 지속시간을 지정한다.

 

(3) timing function

전환 효과의 영향을 받는 css 속성에 대한 중간값 계산 방법을 설정한다.

타이밍 기능은 여러가지가 존재하는데, 그 중에서 ease-out은 전환이 빠르게 시작하고 늦게 끝나는 것을 의미하고 ease-in은 전환이 느리게 시작하고 속도가 향상되는 것을 의미한다. 기본값은 ease이며, 이는 전환 기간동안 일정하게 배분된다는 것을 의미한다.

MDN transition-timing-function

 

(4) delay

지연은 전환이 시작되기 전까지의 시간을 설정한다. delay를 1s로 설정해주는 경우, 특정 변환 이벤트가 트리거되면 1초 뒤에 전환이 발생한다는 뜻이다.