transition
- css의 여러가지 속성(효과)들의 어떤 값이 변경되었을 때 그 전환을 부드럽게 하는 기능
ex) 폰트의 크기가 10에서 100이 될때 자연스럽게 전환되는 것 전환을 제공하기 위한 기능
1. transition-property
- 효과의 대상을 정하는 속성
<head>
<style>
a {
font-size: 3rem;
display: inline-block;
/* transform 효과는 엘리먼트가 block level 요소이거나 inline-block인 경우에만 동작한다. */
transition-property: all;
/* a 태그에 대해서 모든 효과에 대해서 변화가 일어났을 때 전환이 일어난다. */
/* 장면전환 효과를 누구에게 줄 것인가를 정하는 것 */
</style>
</head>
2. transition-duration
- 얼마동안 걸쳐서 효과를 보여줄 것인지를 정하는 속성
<head>
<style>
a {
transition-duration: 2s;
/* 장면 전환이 1초 동안에 걸쳐서 일어난다. */
/* 장면 전환 효과를 사용할 때 기본적으로 property와 duration 2가지를 사용한다. */
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<style>
a {
font-size: 3rem;
display: inline-block;
/* transform 효과는 엘리먼트가 block level 요소이거나 inline-block인 경우에만 동작한다. */
transition-property: all;
/* a 태그에 대해서 모든 효과에 대해서 변화가 일어났을 때 전환이 일어난다. */
/* 장면전환 효과를 누구에게 줄 것인가를 정하는 것 */
transition-duration: 2s;
/* 장면 전환이 1초 동안에 걸쳐서 일어난다. */
/* 장면 전환 효과를 사용할 때 기본적으로 property와 duration 2가지를 사용한다. */
}
a:active {
/* active - 사용자가 마우스를 클릭했을 때 */
transform: translate(20px, 20px);
/* 위치를 변경, translate */
}
a:hover {
background-color: red;
}
</style>
</head>
<body>
<a href="#">Click</a>
<!-- # - 클릭을 해도 어느 웹페이지로 이동하지 않음 -->
</body>
</html>
<!-- inline 요소 -->
<!-- 해당 태그가 마크업하고 있는 콘텐츠의 크기만큼 공간을 차지하도록 되어있어 너비와 높이 지정이 안된다. -->
<!-- margin, padding 적용시 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다. -->
<!-- inline-block 요소 -->
<!-- 기본적으로 inline 요소처럼 전후 줄바꿈 없이 한줄에 다른 요소와 나란히 배치되지만, -->
<!-- block 요소처럼 너비와 높이 속성 지정 및 margin, padding 속성의 상하 간격 지정이 가능하다. -->
3. transition-delay
- 어떤 장면전환 효과가 시작될 때 약간의 시간차를 두고 시작되게 하는 것
4. transition-timing-function
- 장면 전환 속도를 균일하지 않게 하고싶을 때 사용
- 장면 전환 속도를 커스터마이징하는 것
'html & css > 개념' 카테고리의 다른 글
| 코드 경량화 (minify) (0) | 2023.11.29 |
|---|---|
| link와 import로 한번에 적용하기 (0) | 2023.11.28 |
| 변형 (transform) 소개 (0) | 2023.11.28 |
| 필터(filter) (0) | 2023.11.28 |
| 배경(background) (6) | 2023.11.28 |
