CSS day19

transition

transition

transform는 단순히 이동, 회전, 확대, 축소 등을 변환하는 방법이라면 transition은 하나의 스타일을 완전히 다른 스타일로 바꾸는 방법이다. 스타일을 바꾸는 동안의 시간을 조절하여 애니메이션 효과를 줄 수 있다.

트랜지션의 구성

transition: property timing-function duration delay

종류	설명
property	요소에 추가할 전환 효과를 설정
timing-function	전환 효과의 값을 설정
duration	시간동안 전환 효과를 나타냄
delay	시간만큼 대기하다가 전환효과를 나타냄

timing-function 속성의 속성값

종류	설명
linear	처음부터 끝까지 일정한 속도
ease-in	느리게 시작
ease-out	느리게 마무리
ease-in-out	전환 효과가 천천히 시작하고 빨라지고 천천히 마무리

간단한 예제

<div id="border-tr"></div>

#border-tr{
    background-color: deeppink;
    border: 3px solid black;
    transition: all linear 1.5s;
}
#border-tr:hover{
    background-color: pink;
    border: 3px dotted black;
    border-radius: 50%;
}

박스에 마우스를 가져다 대면 다음 그림과 같이 1.5초 동안 변화하는 것을 볼 수 있다.