DevSSOM
HTML, CSS - Transition 속성 본문
Transition
특정 조건 하에서 변화하는 과정을 애니메이션으로 보여주고자 할 때 사용. 예를 들어, 박스에 마우스 오버를 했을 때, 흰색에서 파란색으로 변하게 하고 싶은데 갑자기 휙휙 변하는 게 아니라, 변화하는 과정 자체가 드러나는 자연스러운 변화를 주고자 할 때 트랜지션을 씀. 트랜지션의 각각의 속성값들을 하나하나 알아보면
Property, duration
<style>
.transition {
transition-property: width;
transition-duration: 2s;
}
</style>Property은 변화하는 과정을 주고자하는 CSS속성을 작성할 때 사용. 위에서는 width값이 바뀌는 과정을 사용자에게 보여주겠다는 뜻.
duration은 바뀌는 과정을 얼만큼의 소요시간으로 보여줄 것인지 정할 때 사용. 위에서는 width값을 바꾸는 데에 2초의 시간을 쓰겠다는 뜻.
timing-function, delay
<style>
.transition {
transition-timing-function: linear;
transition-delay: 1s;
}
</style>timing-function은 변화하는 효과의 속도값에 영향을 미치는 값. 위에서 linear는 '일정하게'라는 뜻. 천천히 갔다가 빨라졌다가 할 수도 있고, 일정한 속도일 수도 있고, 빨랐다가 느렸다가 할 수도 있고... 굉장히 많은 속도의 성격을 규정할 때 사용하는 게 타이밍 펑션.
delay는 특정 조건 예를 들어, 마우스를 올렸을 때 박스가 흰색에서 파란색으로 바꼈으면 좋겠다라고 할 때, 바로 바뀌는 게 아니라 약간의 딜레이를 주고 싶다할 때 쓰는게 delay. 위에서도 1초 딜레이를 준다는 뜻에서 1s를 입력함.
가상 선택자 : hover
선택자들이란 HTML의 문서를 선택하는 방법들을 의미함. 태그, 아이디, 클래스가 있었는데, 각각의 요소들은 기존의 HTML 문서에 존재하거나 개발자가 임의로 작성한 아이디나 클래스의 속성값을 가지고 HTML을 선택하는 방식이었음. 가상 선택자는 CSS에서 미리 만들어 놓은 선택자라고 보면 됨. 가상 선택자의 종류도 다양한데, 일단은 여기서 hover만 알아보겠음.
hover는 '마우스를 올렸을 때'라는 의미를 담고 있는 CSS가 미리 만들어 놓은 선택자라고 보면 됨.
<style>
.transition: hover { width: 300px; }
</style>위에선, 마우스를 올렸을 때 width값이 300px로 바꼈으면 좋겠다라는 의미. transition을 사용할 때는 보통 hover와 쌍을 이뤄서 사용함.
Transition 종합
<style>
.transition {
transition: width 2s linear 1s;
}
.transition:hover { width: 300px; }
</style>위의 코드는 마우스를 올리면(hover) 1초 후(delay)에 width 값이 300px로, 2초 동안(duration), 일정 속도(linear)로 변하는 애니메이션 효과가 발동된다는 뜻.
width 2s linear 1s; 여기서 항상 먼저 나오는 숫자가 duration이고, 그 다음에 나오는 숫자가 delay임. 만약에 숫자가 하나인 경우에는 무조건 duration이라고 보면 됨.
연습문제
Q. 빨간색 상자에 마우스를 올렸을 때 가로폭이 길어지는 효과를 주고 싶다면?
- <style> 태그 안에 .transition:hover { width: 300px; }를 입력하여, 특정 영역 마우스를 올렸을 때, 가로폭이 300px로 변하도록 합니다.
- transition-property로 width를 넣어, width에 효과를 적용하도록 합니다.
- transition-duration로 2s를 넣어, 효과가 2초 동안 일어나도록 합니다.
- transition-timing-function로 linear를 넣어, 효과 속도를 일정하게 합니다.
- transition-delay로 1s를 넣어, 효과가 1초 후에 나타나도록 합니다.
- transition 속성값을 한번에 작성해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Transtion</title>
<style>
.transition {
width: 100px;
height: 100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
/* .transition {
transition: width 2s linear 1s; <- 이렇게 한 줄로 입력해도 됨
먼저 나오는 숫자가 항상 duration! 다음에 나오는게 delay!
} */
}
.transition:hover { /* transition:hover 띄어쓰지 말고 붙여써야 기능이 정상 작동됨
width : 300px;
}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>
'HTML, CSS' 카테고리의 다른 글
| HTML, CSS - 미디어 쿼리 (0) | 2021.08.09 |
|---|---|
| HTML, CSS - Transform과 Animation을 결합할 때 (0) | 2021.08.08 |
| HTML, CSS - Animation 속성 (0) | 2021.08.07 |
| HTML, CSS - Transform 속성 (0) | 2021.08.05 |
| HTML/CSS - 간단한 쇼핑몰 만들기 실습 3(하단 영역) (0) | 2021.07.18 |
| HTML/CSS - 간단한 쇼핑몰 만들기 실습 1(상단 영역) (0) | 2021.07.16 |
| CSS - 레이아웃에 영향을 미치는 속성 (0) | 2021.07.15 |
