<22.05.21> CSS 공부 일지 #09. HTML 요소를 이리저리 움직여보자 ㅡ CSS의 transition

css 공부하기 #09

 

오늘은 CSS의 transition 속성에 대해 알아보고자 한다. 웹 페이지를 둘러보면 마우스로 어떤 버튼을 갖다대기만 하였는데 슬라이드가 움직인다던가, 메뉴바가 내려온다던가 하는 것들이 있다. CSS의 transition으로 구현할 수 있다.

 

 

1. transition

 

 

CSS transition은 CSS 속성을 변경할 때 애니메이션 속도를 조절한다. HTML의 요소가 움직이는 속도를, transition을 통해 조절할 수 있는 것이다. 예를 들어, 아래와 같은 코드가 있다고 가정하자.

 

  <div class = "box">
    HELLO
  </div>

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  background-color: #f00;
}

.box:hover {
  background-color: #0f0;
}

 

빨간색 상자에 마우스를 가져다대면(.box:hover) 초록색으로 바꾸는 코드이다. 실제 브라우저에서는 아래와 같이 출력된다.

 

 

커서에 가져다대면 박스의 색깔이 곧바로 전환된다. 위와 같은 효과를 실제 웹 페이지에 적용하면 조금 촌스러울 것 같다는 생각이 든다. transition은 위처럼 특정 이벤트가 발생하였을 때 HTML 요소의 스타일의 전환 속도를 조절할 수 있다. 아래 코드를 보자. 이전에 소개한 코드에서 딱 한 줄 추가되었다.

 

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  background-color: #f00;
  transition: 0.5s;
}

.box:hover {
  background-color: #0f0;
}

 

transition: 0.5s; 라는 코드를 한 줄 입력하였다. 이 코드 한 줄로 .box는 좀 더 부드럽게 색깔을 전환할 수 있게 되었다.

 

 

색 전환에 소요되는 시간이 늘었다. transition으로 설정하였던 값만큼 시간이 걸린다. 0.5s의 s는 second이다. 

 

나는 transition 속성을 처음 배웠을 때 조금 헷갈렸다. transition을 어디에 작성해야 하는지가 헷갈렸다. 바뀌는 요소에 적용해야하는지 그렇지 않으면 요소를 변하게 하는 이벤트 코드 내부에 작성해야하는지 말이다. 하지만 조금만 써보니 금방 익힐 수 있었다. transition은 바꾸고자 하는, 혹은 움직이고자 하는 요소에 작성해주어야 한다.

 

 

2. transition의 개별 컴포넌트

 

 

상술했던 transition은, margin,padding,flex와 마찬가지로 단축 속성(shorthand)이다. transition은 다양한 하위 속성을 가짐으로써 개발자가 HTML 요소를 좀 더 섬세하게 이동시킬 수 있다는 장점이 있다. transition의 하위 속성에 대해 알아보자.

 

property name	description
transition-property	transition을 적용하고자 하는 CSS 속성을 개별적으로 선별할 수 있다. 해당 속성에 입력된 속성은 transition이 작동하고, 그 외 속성은 이벤트 발생 즉시 변환된다.
transition-duration	transition이 일어나는 지속 시간을 명시하여야 한다.
transition-timing-function	속성의 중간값을 계산하는 방법을 정의하는 함수를 입력하여야 한다. ( ease/linear/step=end/steps(4, end) etc ... )
transition-delay	transition이 시작하는 시간을 입력값만큼 지연시킨다.

 

transition-timing-function에 대한 설명이 조금 필요할 것 같다. 해당 속성은 CSS 속성이 변화하는 속도를 조금 더 역동적으로 설정할 수 있다. 해당 속성은 cubic bezier는 일종의 함수로 베지어 곡선을 정의하는데, 이렇게 정의된 transition은 베지어 곡선에 따라 변환 속도가 결정된다.  

---

베지어 곡선(Bezier Curves)

     - 부드러운 곡선을 모델링하기 위해 컴퓨터 그래픽에서 널리 사용된다. 커브가 컨트롤 포인트의 볼록한 선체에 완전         히 포함되어 있기 때문에 점을 그래픽으로 표시하고 직관적으로 커브를 조작하는데 사용할 수 있다. 변환 및 회전         과 같은 어피니션 변환은 곡선의 제어점에 각각의 변환을 적용하여 곡선에 적용할 수 있다.

---

 

아래 사이트는 다양한 베지어 곡선들을 소개하고 있으며, 이를 모두 cubic bezier 함수를 통해 상세한 수치를 입력해놓았다. 여러모로 도움이 된다.

 

 

Easing Functions Cheat Sheet

 

 

위 속성을 사용하면, CSS 속성의 속도가 cubic bezier 함수로 설정된 값대로 움직인다. 위 사이트에 그려진 그래프를 클릭하여 cubic bezier 값을 입력해주면 그래프와 동일한 속도로 CSS 속성이 변환된다.

 

위에서 소개한 네 개의 컴포넌트를 transition이라는 shorthand로 모두 핸들링할 수 있다. 우선 shorthand로 작성하지 않은 transition 코드를 확인해보자.

 

  <div class = "box">
    HELLO
  </div>

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10px;
  width: 250px;
  height: 250px;
  background-color: #f00;
  opacity: 1;
  transition-property: top, background-color;
  transition-duration: 2s;
  transition-timing-function: ease-in;
  transition-delay: 1.0s;
}

.box:hover {
  top: 60px;
  border-radius: 100%;
  background-color: #0f0;
}

 

transition을 적용시킬 속성은 top과 background-color만 설정하였다. 이 경우 border-radius는 그 전환이 이벤트 발생(마우스 갖다대기) 즉시 일어난다. 아래 .gif는 위 코드를 실제로 실행한 결과이다.

 

 

border-radius는 마우스를 도형에 갖다댄 그 즉시 전환되었다. 그 외 속성들은 transition 개별 컴포넌트로 작성해주었던 수치만큼 transition이 잘 작동되었음을 알 수 있다. transition-property를 입력하지 않으면, all로 작성된 것으로 처리되어 모든 속성들에게 transition이 적용된다. 

 

transition shorthand는 아래와 같은 형식으로 작성해야 한다.

 

element {
  transition: <property> <duration> <timing-function> <delay>;
}

 

아래 코드는 위 코드를 shorthand syntax로 작성한 것이다.

 

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10px;
  width: 250px;
  height: 250px;
  background-color: #f00;
  opacity: 1;
  transition: all 2.0s ease-in 1.0s;
}

.box:hover {
  top: 60px;
  border-radius: 100%;
  background-color: #0f0;
}

 

transition shorthand에서 property를 작성하지 않을 경우 모든 속성들에게 transition이 적용된다. transition shorthand를 통해 개별 컴포넌트를 사용하지 않고도 간편하게 transition을 적용시킬 수 있다.

 

 

오늘은 CSS의 transition에 대해 알아보았다. 해당 속성을 통해 HTML 요소를 자유자재로 변경할 수 있으며 더욱 동적인 웹을 만드는데 한 걸음 다가간 느낌이었다. 다음에도 재미있는 공부거리를 들고 포스팅하도록 하겠다.

 

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.