728x90


과거에 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들도 부드럽게 움직이는 것을 확인할 수 있다.



+ Recent posts