트렌지션이란?
트랜지션(transition)은 CSS 값이 변화할 때,변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것
--> 트랜지션(transition)은 상태 변화에 동반하여 변경되는 CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티 값의 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신 그 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 300px;
background: red;
/* 트랜지션 효과: 모든 프로퍼티의 변화를 3초에 걸쳐 전환한다. */
transition: all 3s;
}
div:hover {
border-radius: 60%;
background: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>⭐️주목!!!!
div에 트랜지션을 설정하면 마우스를 올릴때, 내릴때 모두 트렌지션이 작동하지만
만약, div:hover 에다가 트랜지션을 설정하면 마우스가 올라갈 때는 트랜지션이 발동하지만 마우스가 내려올 때에는 트랜지션이 발동하지 않는다.
# transition-property
transition-property 프로퍼티는 트랜지션의 대상이 되는 CSS 프로퍼티명을 지정한다.
지정하지 않는 경우 모든 프로퍼티가 트랜지션의 대상이 된다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: blue;
transition-property: width, background-color;
transition-duration: 1s, 1s;
}
div:hover {
width: 500px;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>but, 모든것이 트렌지션의 대상이 될 수는 없음!!
width, font-size, background-color 등은 하나의 범주(width, font-size는 크기, background-color는 색상)안에서 값이 변화하지만 display 프로퍼티는 그렇지 않다.
트렌지션 대상이 될 수 있는 것들
// Box model
width height max-width max-height min-width min-height
padding margin
border-color border-width border-spacing
// Background
background-color background-position
// 좌표
top left right bottom
// 텍스트
color font-size font-weight letter-spacing line-height
text-indent text-shadow vertical-align word-spacing
// 기타
opacity outline-color outline-offset outline-width
visibility z-index
# transition-duration
transition-duration 프로퍼티는 트랜지션에 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.
위 포스팅은 아래 싸이트의 내용을 혼자 공부하며 정리한 내용이므로, 아래 싸이트로 방문하여 공부할 것을 추천!!!
https://poiemaweb.com/css3-transition
CSS3 Transition | PoiemaWeb
트랜지션(transition)은 CSS 프로퍼티 변경에 따른 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신 그 프로퍼티
poiemaweb.com
'✍ 따뜻한 개발 공부' 카테고리의 다른 글
| [스파르타-웹퍼블리셔] 3주차 강의 내용 정리 (0) | 2022.11.16 |
|---|---|
| [스파르타-깃허브] 2주차 강의 내용정리 (0) | 2022.11.16 |
| [스파르타-웹퍼블리셔] 웹퍼블리셔 2주차 강의 정리 (0) | 2022.11.15 |
| [스파르타-알고리즘] 2-6 링크드 리스트 sum / 이진 탐색 (0) | 2022.11.15 |
| [스파르타-웹퍼블리셔] 웹 퍼블리셔 강의 1주차 내용 정리 (0) | 2022.11.14 |
댓글