delay - 한 눈에 끝내는 CSS/JS 애니메이션

배우기

02 CSS Animation1. transition

delay

현재 실습 환경의 '실행' 버튼을 클릭하면 가로, 세로 100px 길이를 가지며, 빨간 배경색을 가진 <div>가 등장합니다. <div>에 마우스 커서를 올리면 가로, 세로 300px 길이를 가진 파란 배경색의 <div>로 변하는 걸 확인할 수 있습니다.

주어진 코드에 아래와 같이 코드를 한 줄 추가해주세요. 지금은 이 코드의 의미를 모르셔도 괜찮습니다.

div {
	width: 100px;
	height: 100px;
	background-color: red;
	transition: all 2s;
}

css

처음에는 배경색과 크기가 마우스 커서를 대자마자 바뀌었지만, 코드를 추가하니 마치 애니매이션처럼 천천히 바뀌는 걸 확인할 수 있습니다. 이것이 바로 transition의 마법입니다! 지금부터 transition에 대해 함께 더 알아보겠습니다.

transition-delay

첫 번째로 살펴 볼 transition과 관련된 프로퍼티는 transition-delay입니다.

transition-delay에서 delay는 '지연'을 뜻합니다. transition이 발생할 때 얼만큼 기다렸다가 실행할지 결정해주는 속성이죠. 그렇다면 당연히 프로퍼티 값으로 시간이 필요하겠죠? 초 단위인 s나 밀리 초 단위인 ms로 나타냅니다. 만약 프로퍼티 값을 지정해주지 않으면 자동으로 0s가 입력되어 바로 transition이 발생합니다.

프로퍼티 값은 양수 값만 가능할까요? 아닙니다. 프로퍼티 값은 놀랍게도 음수 값 지정이 가능합니다. 음수 값으로 지정하면 지연 없이 바로 transition이 실행되지만, 지정한 음수 값의 절대값 시간만큼 건너뛰고 시작합니다. 음수 값에 대한 예제는 다음 강의인 duration과 함께 보겠습니다.

아래는 마우스를 올렸을 때 배경을 바꿔주는 예제 코드입니다. 세 개의 <div>에 대해서 transition-delay 값을 다르게 지정했습니다. 차이를 직접 확인해 봅시다.

<div class="box first">0초</div>
<div class="box second">1초</div>
<div class="box third">2초</div>

html

body {
	display: flex;
}
.box {
	width: 100px;
	height: 100px;
	background: red;
	font: bold;
	color: white;
	margin-right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.box:hover {
	background: blue;
}
.first {
	transition-delay: 0s;
}
.second {
	transition-delay: 1s;
}
.third {
	transition-delay: 2s;
}

css

각각 마우스를 올려두고 0초, 1초, 2초 이후에 변화하는 것을 확인 할 수 있습니다.

실습 내용

transition 강의의 코드를 따라가며 직접 작성해봅시다. 직접 작성하고 값을 바꾸며 복습해야 여러분 것이 됩니다.

질문하기

추가 자료

추가 자료가 없습니다

여기서 새로운 학습 자료를 확인하세요!
선생님이 추가한 자료들을 바로 확인할 수 있어요.