![[CSS] CSS3에 등장한 신조어 'transition'](/_next/image?url=https%3A%2F%2Fblog.huns.site%2Fimgs%2Fthumbnails%2Fblog%2Fposts%2Ffrontend%2Fstyle%2Fcss.png&w=1200&q=75)
TOC
transition 속성
- 특정 조건에 따라 상태가 변하는 것
- 색상이나 크기 등과 같은 속성이 특정 조건에 따라 변화하는 과정
- 특정 조건 ex) 마우스 포인터를 올렸을 때
*html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<title>transition 속성</title>
<link ref="stylesheet" href="CSS문서명.css" />
</head>
<body>
<div id="transition"></div>
</body>
</html>
*css파일 #transition {
width: 300px;
height: 300px;
background-color: yellow;
transition-property: width;
transition-duration: 3s;
transition-timing-function: ease;
transition-delay: 1s;
}
#transition:hover {
width: 600px;
}
가. transition-property
- 변화를 주려는 속성
- 속성을 쉼표(,)로 구분하여 여러 개 지정 가능
- 변화를 주는 속성이 많을 때는 all을 속성값으로 입력
나. transtion-duration
- 변화가 일어나는 시간
- 기본값은 0s
- transition- 속성을 적용하기 위해 꼭 명시해야 함!
다. transition-timing-function
- 변화하는 속도를 어떻게 가속시키고 감속시킬지
linear : 시작~종료, 같은 속도로 변화
ease : 초반은 느리게, 중반을 빠르게, 종반은 느리게
ease-in : 초반은 느리게
ease-out : 후반은 느리게
ease-in-out : 시작, 종료 지점의 변화가 느리게
라. transition-delay
- 변화가 시작되는 시간을 지연시킬 때 사용
- 기본값은 0s
마. transition:hover
- transition 영역에 마우스 포인터를 올렸을 때
- :hover 는 마우스 포인터를 올렸을 때 라는 의미를 담은 가상 클래스
+ 주석과 함께 한 번에 표현하면?
*css파일 #transition {
width: 300px;
height: 300px;
background-color: yellow;
/* 변화 과정을 보여 주고자 하는 속성은 width */
transition-property: width;
/* width 300px->600px 변화하는 데 걸리는 시간은 3초 */
transition-duration: 3s;
/* 느리게, 빠르게, 느리게 진행 */
transition-timing-function: ease;
/* 마우스 포인터를 올렸을 때 1초 후에 변화 시작 */
transition-delay: 1s;
}
/* #transition에 마우스 포인터를 올렸을 때
width 속성값이 600px로 변화 */
#transition:hover {
width: 600px;
}
+ 한 줄로 할 때에는?
*css파일 #transition {
width: 300px;
height: 300px;
transition-property: width;
transition-duration: 3s;
transition-timing-function: ease;
transition-delay: 1s;
}
위의 transition 표현은 아래 표현처럼 한 줄로 표현할 수 있다.
*css파일 #transition {
width: 300px;
height: 300px;
transition: width 3s ease 1s;
}
먼저 나오는 숫자(3s)는 duration, 나중에 나오는 숫자(1s)는 delay를 의미
