[CSS animation] 트랜지션 (transition)

 

 

안녕하세요 PNcoding입니다 :)

 

오늘은 트랜지션(transition)에 대하여 알아보도록 하겠습니다.

 

 

트랜지션과 유사하지만 다르게 움직임을 표현해 주는 속성인 애니메이션에 대하여 궁금하신 분은 여기를 참고해 주시면 되겠습니다 :)

https://pncoding.tistory.com/4

[CSS animation] css 애니메이션

 

---

 

 

트랜지션은 css의 속성을 변경할 때 시간값을 부여하여 부드럽게 움직임을 구현시켜 줄 수 있습니다.

예를 들면 네이버의 메인의 이미지들처럼 이미지에 마우스를 올렸을 때 이미지의 크기가 부드럽게 커지게 만들어 줄 수 있습니다.

 

이렇게 트랜지션은 웹페이지를 사용하는 사용자가 가만히 있으면 아무것도 일어나지 않지만, 사용자가 어떠한 행동을 하게 되었을 때 바뀌는 형태에 시간값을 부여하는 속성입니다.

따라서 트랜지션은 이벤트들과 자주 사용된다고 볼 수 있습니다.

 

 

 

트랜지션 속성

• transition : 아래의 4가지 속성을 한 줄에 설정
• transition-duration : 이벤트가 실행될 때 지속시간 부여
• transition-delay : 트랜지션을 바로 실행시키지 않고 지연시간 부여
• transition-timing-function : 트랜지션의 가속도 지정
• transition-property : 트랜지션을 적용할 css 속성 선택

 

 

transition-duration

이벤트에 지속시간을 부여하여 부드러운 움직임이 구현되도록 만들어 주는 속성입니다.

기본값은 0초이며 s(초), ms(밀리초) 단위를 적용시켜 줄 수 있습니다.

 

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

 

.box {
    width: 100px;
    height: 100px;
    background-color: gold;
    transition-duration: 1s;
}

.box:hover {
    background-color: coral;
    width: 300px;
}

 

duration을 1s를 적용해 줬더니 박스에 마우스를 올렸을 때 배경색상과 가로크기값이 1초 동안 부드럽게 변화하는 것을 확인할 수 있습니다.

 

마우스를 올려보세요 :)

 

transition-delay

transition-delay값을 넣어주면 요소에 마우스를 올렸을 때 적용시킨 delay값만큼 움직임이 지연되는 것을 확인할 수 있습니다.

 

.box {
    width: 100px;
    height: 100px;
    background-color: gold;
    transition-duration: 1s;
    transition-delay: 2s;
}

.box:hover {
    background-color: coral;
    width: 300px;
}

 

 

 

반응형

 

 

transition-timing-function

트랜지션 움직임의 가속도를 지정해 줄 수 있는 속성입니다.

기본적으로 linear, ease, ease-in, ease-out, ease-in-out 등의 가속도를 적용해 줄 수 있으며, 만약 원하는 가속도의 형태가 나오지 않는다면 웹페이지의 개발자도구를 통해 가속도를 바꾸어 줄 수 있습니다.

 

• linear : 시작부터 끝까지 일정한 속도로 움직임
• ease : 기본값, 느리게 시작해서 점점 빨라졌다가 느려지면서 움직임 종료
• ease-in : 처음에 느리게 시작해서 마지막에 빠르게 움직임 진행
• ease-out : 처음에 빠르게 시작해서 마지막에 느리게 움직임 진행
• ease-in-out : 처음에 천천히 시작해서 중간에 빨라지고 마지막에 느리게 움직임 진행

.box {
    width: 100px;
    height: 100px;
    background-color: gold;
    transition-duration: 1s;
    transition-timing-function: linear;
}

.box:hover {
    background-color: coral;
    width: 300px;
}

 

 

가속도값 커스텀하기

기본적인 가속도값을 적용시켜도 되지만, 개발자도구를 통하여 가속도를 커스텀해줄 수 있습니다.

적용된 transition-timing-function의 보라색 아이콘을 클릭하여 나오는 가속도 그래프의 보라색 동그라미를 드래그하여 원하는 형태의 가속도를 만들어 줄 수 있습니다.

보라색 동그라미를 움직이게 되면 그래프 하단의 cubic-bezier의 수치가 바뀌게 되며, 그 수치값을 직접 transition-timing-function에 적용시켜 주면 됩니다.

트랜지션 가속도 커스텀

 

.box {
    width: 100px;
    height: 100px;
    background-color: gold;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.87, 0.01, 0.28, 1);
}

.box:hover {
    background-color: coral;
    width: 300px;
}

 

 

 

transition-property

트랜지션 움직임이 적용될 css속성을 지정할 때 사용하는 속성입니다.

기본값은 all이며 이벤트에 적용된 모든 속성에 트랜지션이 적용됩니다.

 

• none : 아무 속성도 지정하지 않음
• all : 기본값, 모든 속성에 지정함
• css property값 (width, background-color 등) : 변경하고 싶은 속성을 직접 지정, 여러 개 지정 시 콤마(,)로 구분함

.box {
    width: 100px;
    height: 100px;
    background-color: gold;
    transition-duration: 1s;
    transition-property: width;
}

.box:hover {
    background-color: coral;
    width: 300px;
}

 

transition-property에 width값만 적어주면 width의 변화에만 시간값이 부여되어 부드러운 움직임이 적용되고, background-color에는 시간값이 부여되지 않아 부드럽지 않고 툭툭 바뀌는 형태로 표현됩니다.

 

 

transition

트랜지션을 축약하여 표현해 줄 수 있습니다.

transition : property duration timing-function delay;

 

transition 속성 안에 4가지의 속성값을 띄어쓰기로 구분하여 적어주시면 됩니다.

property나 timing-function에 값을 넣지 않으면 기본값이 적용이 되지만, 반드시 duration의 값을 넣어야만 부드러운 움직임이 적용됩니다.

 

.box {
    width: 100px;
    height: 100px;
    background-color: gold;
    transition: 1s linear;
}

 

 

 

 

---

 

 

이렇게 해서 트랜지션 속성에 대하여 알아보았습니다.

 

조금 더 자세히 알고 싶으신 분들은 아래 유튜브 링크를 클릭하셔서 참고하시면 되겠습니다 :)

 

https://www.youtube.com/watch?v=Zp-n49r9TCA&t=7s