고정 헤더 영역
상세 컨텐츠
본문
반응형
트랜지션이란
- 웹 요소의 배경 색이 바뀌거나 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것을 말한다.
속성
- transition-property : 트랜지션 대상을 설정합니다.
- transition-duration : 트랜지션 진행 시간을 설정합니다.
- transition-timing-function : 트랜지션 속도 곡선을 설정합니다.
- transition-delay : 트랜지션 지연 시간을 설정합니다.
- transition : transition-property와 transition-duration, transition-timing-function, transition-delay 속성을 한꺼번에 설정한다.
transition-property 속성 - 트랜지션을 적용할 속성 지정하기
- 트랜지션을 어느 속성에 적용할 것 인지를 선택한다. transition-property 속성을 이용해 지정한다.
transition-property : all | none | <속성 이름>
속성
- all : all 값을 사용하거나 transition-property를 생략할 경우, 요소의 모든 속성이 트랜지션 대상이 된다.
- none : 트랜지션 동안 아무 속성도 바뀌지 않는다.
- <속성 이름> : 트랜지션 효과를 적용할 속성 이름을 지정한다. 원하는 대상만 골라 지정할 수 있다. 속성이 여러 개일 경우 쉼표(,)로 구분해 나열한다.
transition-property : all; /* 해당 요소의 모든 속성에 트랜지션을 적용 */
transition-property: background-color; /* 해당 요소의 배경 색에 트랜지션 적용 */
transition-property: width, height; /* 해당 요소의 너비와 높이에 트랜지션 적용 */
transition-duration 속성 - 트랜지션 진행 시간 지정하기
- transition-property에서 트랜지션 대상을 지정했다면 진행 시간을 지정해야 그 시간 동안 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
.tr1 {
width: 100px;
height: 100px;
background-color: blue;
transition-property: width, height;
transition-duraiton: 2s, 1s;
}
.tr1:hover {
width: 200px;
height: 120px;
}
</style>
</head>
<body>
<div class="tr1">
</div>
</body>
</html>실행 화면
transition-timing-function 속성 - 트랜지션 속도 곡선 지정하기
- transition-timing-function 속성을 사용하면 시작과 중간, 끝에서의 속도를 지정해 속도 곡선을 만들 수 있다.
transition-timing-function: linear | ease | ease-in | ease-out | east-in-out | cubit-bezier(n,n,n,n)
속성
linear : 시작부터 끝까지 똑같은 속도로 트랜지션을 진행한다.
ease : 처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝낸다. 기본 값이다.
ease-in : 시작을 느리게 한다.
ease-out : 느리게 끝난다.
ease-in-out : 느리게 시작하고 느리게 끝낸다.
cubic-bezier(n,n,n,n) : 배지에 함수를 직접 정의해 사용한다. n에서 사용할 수 있는 값은 0~1이다.
transition-delay 속성 - 지연 시간 설정하기
- transition-delay 속성은 트랜지션이 언제부터 시작할 것 인지를 설정한다. 이 속성에서 지정한 시간만큼 기다렸다가 트랜지션이 시작된다.
- 사용할 수 있는 값은 초나 밀리초이며 기본 값은 0s이다.
transition 속성 - 트랜지션 속성 한꺼번에 표기하기
- transition 속성을 이용해 위의 속성을 한꺼번에 지정할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
.tr1 {
width: 200px;
height: 200px;
background-color: red;
transition: 2s ease-in;
}
.tr1:hover {
width: 100px;
height: 100px;
background-color: #ff6e5f;
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="tr1">
</div>
</body>
</html>
실행 화면
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS] 변형과 관련된 속성들 (0) | 2021.05.17 |
|---|---|
| [CSS] 변형 (0) | 2021.05.16 |
| [CSS] 가상 클래스와 가상 요소 (0) | 2021.05.13 |
| [CSS 기초] 속성 선택자 (0) | 2021.05.12 |
| [CSS 기초] 연결 선택자 (0) | 2021.05.11 |
댓글 영역