# transition이란?
CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 기간(duration)에 걸쳐 일어나도록 하는 것.
아래 div 요소는 기본 상태에서 'hover상태'로 변화할 때, CSS 프로퍼티 border-radius와 background 프로퍼티의 값이 변화한다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
}
div:hover {
border-radius: 50%;
background: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>상태 변화에 따라 CSS 프로퍼티가 변경되면 프로퍼티 변경에 따른 변화는 지체없이 즉시 발생한다.
위 예제의 경우, div요소에 마우스가 올라가서 hover상태가 되면, div 요소의 border-radius, background 프로퍼티의 값이 즉시 변경된다.
See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen.
transition은 상태 변화에 동반하여 변경되는 CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다.
즉, 프로퍼티 값의 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신, 그 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: all 2s; /* 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
}
div:hover {
border-radius: 50%;
background: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 예제에서는 div요소에 마우스가 올라갈 때 (hover on)와 마우스가 내려올 때(hover off) border-radius, background 프로퍼티 값의 변화가 발생하한다. 그리고 이들 프로퍼티 값의 변화를 2초(2s)에 걸쳐 이루어지도록 설정한 것.
위와 같이 'div' selector에 transition을 설정하면, 마우스가 올라갈 때(hover on)와 마우스가 내려올 때(hover off) 모두 transition이 발동한다. 하지만 div:hover selector에 transition을 설정하면, 마우스가 올라갈 때(hover on)는 트랜지션이 발동하지만, 마우스가 내려올 때(hover off)는 트랜지션이 발동하지 않는다.
See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen.
transition은 자동으로 발동되지 않는다.
:hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JS의 부수적인 액션에 의해 발동한다.
가상 클래스 선택자 ▼
가상 클래스 셀렉터(Pseudo-Class Selector)
가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. [ 특정 상태의 예 ] 마우스가 올라와 있을 때 링크를 방문했을 때와 아직 방문하지 않았을 때 포커스가 들어와 있을 때 이
lion284.tistory.com
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: all 2s;
}
.hover {
background: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
<script>
const elem = document.querySelector('div');
elem.addEventListener('mouseover', function() {
this.classList.add('hover');
});
elem.addEventListener('mouseleave', function() {
this.classList.remove('hover');
});
</script>
</body>
</html>
See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen.
* 만약 transition이 자동 발동(self-invoking transition)하도록 하고 싶다면 CSS 애니메이션을 사용하도록 한다.
transition의 프로퍼티는 다음과 같다.
| 프로퍼티 | 설명 | 기본값 |
| transition-property | 트랜지션의 대상이 되는 CSS 프로퍼티 지정 | all |
| transition-duration | 트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초(ms)로 지정 | 0s |
| transition-timing-function | 트랜지션 효과를 위한 수치 함수 지정 | ease |
| transition-delay | 프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초(ms)로 지정 | 0s |
| transition | 모든 트랜지션 프로퍼티를 한번에 지정(shorthand syntax) |
* 출처 ▼
CSS3 Transition | PoiemaWeb
트랜지션(transition)은 CSS 프로퍼티 변경에 따른 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신 그 프로퍼티
poiemaweb.com
'CSS' 카테고리의 다른 글
| 프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 ✨ by 드림코딩 (0) | 2023.12.10 |
|---|---|
| 가상 클래스 셀렉터(Pseudo-Class Selector) (0) | 2023.10.17 |
| HTML파일에 CSS 적용하는 방법 3가지 (0) | 2023.07.10 |
| 박스를 가운데정렬해주는 방법 margin: 0 auto (0) | 2022.09.06 |
| text-align : center (0) | 2022.09.05 |
