안녕하세요. 명월입니다.
이 글은 CSS에서 트랜지션(transition)에 대한 글입니다.
CSS의 트랜지션(transition)은 속성을 변경할 때 변경 속도를 조절하고, 변경 주기를 설정하는 것이라고 생각합니다.
예를 들어, "div" 태그의 배경색을 노란색으로 설정하고 마우스를 태그 위에 올리면(hover) 녹색으로 설정한다고 했을 때, 실제로는 변경 속도나 주기가 없이 바로 바뀌게 될 것입니다.
예
마우스를 위에 올려 주세요.
하지만 트랜지션(transition)을 설정하게 되면 순식간에 바뀌지 않고 천천히 바뀌게 될 것입니다.
예
마우스를 위에 올려 주세요.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>마우스를 위에 올려 주세요.</div>
</body>
</html>
div {
/* div 태그 배경색 설정이 노란색으로 설정 */
background-color: yellow;
/* transition의 설정은 배경색 설정으로 한다. */
transition-property: background-color;
/* transition의 변경 완료 시간 2초, 노란색에서 녹색으로 변경되는데 시간 */
transition-duration: 2s;
/* 변하는 속도가 점점 빨라지는 패턴 */
transition-timing-function: ease-out;
/* 0.5초 뒤에 transition이 변경되는 딜레이 시간 */
transition-delay: 50ms
}
div:hover {
/* div 태그 배경색 설정이 녹색으로 설정 */
background-color: green;
/* transition의 설정은 배경색 설정, 녹색에서 노란색으로 2초, 점점 빨라지는 패턴으로 딜레이는 0.5초 뒤에 실행하는 설정 */
transition: background-color 2s ease-out 50ms;
}
트랜지션(transition)은 총 4가지 속성이 있습니다. 4가지 속성이라고 해도 delay 속성 이외에 3가지 속성을 설정을 해야 transition이 설정이 됩니다.
transition의 shorthand 설정은 style property, 변경 시간, 패턴, 딜레이 순으로 설정 됩니다.
transition-property은 css style 이름입니다. 위 예에서는 background-color를 설정했는데, width나 position, left 등을 많이 설정합니다.
transition-duration은 변환 시간입니다. 위 예제는 노란색에서 녹색으로 녹색으로 노란색으로 변환하는 시간 설정을 2초로 했습니다.
transition-timing-function는 변환 유형입니다.
ease-out는 처음에는 느리고 빠르게 변환하는 타입, ease-in는 처음에는 빠르고 느려지게 변환하는 타입, ease-in-out은 빠르고 느려지고 다시 빨리지는 타입, linear는 일정한 속도로 변환하는 타입입니다.
cubic-bezier (n, n, n, n)은 직접 변환 속도를 지정하는 유형입니다.
참조 - https://cubic-bezier.com/
참고로 위에 div와 div:hover에 트랜지션(transition)이 걸려 있습니다. div에 있는 트랜지션(transition)는 div:hover에서 돌아올 때의 스타일이고 div:hover에 있는 트랜지션(transition)는 div에서 div:hover로 적용될 때 사용되는 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
/* 너비는 100%이다. */
width: 100%;
/* 높이는 50px로 설정한다.*/
height: 50px;
/* textarea: focus -> textarea로 바뀔 때 적용되는 transition */
/* 트랜지션 프로퍼티 : height */
transition-property: height;
/* 트랜지션 총 걸리는 시간 : 1초 (높이가 돌아올 때)*/
transition-duration: 1s;
/* 초움애는 느리고 빠르게 변하는 타입 */
transition-timing-function: ease-out;
}
/* textarea가 선택이 되면 설정되는 스타일이다. */
textarea: focus {
/* 높이는 200px으로 설정한다. */
height: 200px;
/* textarea -> textarea: focus로 바뀔 때 적용되는 transition */
/* 트랜지션 프로퍼티 : height */
transition-property: height;
/* 트랜지션 총 걸리는 시간 : 5초 */
transition-duration: 5s;
/* 스타일은 빠르고 느려지다가 다시 빨라지는 타입 */
transition-timing-function: ease-in-out;
}
</style>
</head>
<body>
<textarea placeholder="please input text!"></textarea>
</body>
</html>
예
실제 웹 서비스 상에서 부드러운 액션 동작과 광고등을 강조하는 방법으로 자주 사용하는 스타일입니다.
하지만 반대로 웹 페이지에 트랜지션(transition)이 너무 많으면 집중도를 떨어지는 역효과도 있습니다.
여기까지 CSS에서 트랜지션(transition)에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [CSS] 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드) (0) | 2020.03.13 |
|---|---|
| [CSS] 색 스타일(color style) - 그라데이션(gradient) (2) | 2020.03.10 |
| [CSS] 애니메이션(animation) (0) | 2020.02.28 |
| [CSS] 트랜스폼 (transform) (0) | 2020.02.19 |
| [CSS] Column 요소 스타일 (0) | 2020.02.17 |
| [CSS] 정렬 스타일(float) (0) | 2020.02.12 |
| [CSS] 위치(postion)과 요소 객체 스타일(display) (0) | 2020.01.29 |
| [CSS] 테두리 및 여백 스타일 - border, margin, padding (0) | 2020.01.28 |