css지옥에서 탈출하자(8) - div에 transition을 줘서 부드럽게 애니메이션 효과로 움직이기

이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.

여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.

참고:

css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.

css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열

css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)

css지옥에서 탈출하자(4) - display: flex와 margin: auto를 이용해서 기존의 문제 해결(header나 nav에서 한 엘리먼트만 좌측 배치, 바닥에 붙는 footer, 수직 중앙정렬)

css지옥에서 탈출하자(5) - 엘리먼트를 드래그 앤 드랍(drag and drop)으로 자유롭게 옮긴다고?

css지옥에서 탈출하자(6) - css로 삼각형을 그려보자

css지옥에서 탈출하자(7) - display inline-block 나열시 공백 제거하기

과거에 html에서 div나 img들이 동적으로 움직이는걸 보면 저걸 html로 하는게 아니라 그림으로 하는줄 알았다.

하지만 알고보니까 html에 전부 있는 기능들이였다. 이번에는 div를 동적으로 움직이게 하는 방법을 알아보도록하자.

간단히 사용할 정도로만 알려드릴 생각이고 깊게 알고싶다면

여기 mozilla에서 확인해보도록 하자.

일단 간략하게 설명을 해야할것 같다.

코드는 매우 간단하다.

위와 같은 코드를 작성한 이유는 간단하게 어떻게 작동하는지 알려드리고 싶어서이다.

transition: <변경할 속성> <변화되는 시간> <변화도를 측정할 함수: 기본값은 linear> <지연시간: 기다렸다 실행>

transition속성을 부여하게되면 해당 속성 값이 바뀌게 될경우 한번에 바뀌는게 아니라 부드럽게 바뀌게 된다.

변화되는 시간은 1초에서 2초정도 다양하고 동적인 값을 주기 위해서 js로 값을 넣기도 한다.

transition의 세번째 속성은 변화되는 함수를 생성하는 것이다. 기본적으로 linear, ease, ease-in. ease-out. ease-in-out으로 5개가 있다.

함수로 조정할 수도 있는데 steps함수와 cubic-bezier함수가 있다.

이 둘을 설명하지는 않겠다. 다른데 검색해 보던가 하는게 좋을 것 같다.

결과적으로 부드럽게 바뀌는걸 확인할 수 있다.

추가적으로 시연해보면 연관된 다른 element들도 부드럽게 움직이는 것을 확인할 수 있다.