transitions
CSS 속성의 전환 효과를 지정 - CSS 속성의 시작과 끝을 지정하여 중간 값을 애니메이션
| 속성값 | 의미 | 기본값 |
| transition-property | 전환 효과를 사용할 속성 이름 | all |
| transition-duration | 전환 효과의 지속시간 설정 | 0s |
| transition-timing-function | 타이밍 함수 지정 | ease |
| transition-delay | 전환 효과의 대기시간 설정 | 0s |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition-property: width, background-color;
/* transition-property : duration의 전환 효과 지속시간을 따로 설정하기 위해서 사용함 */
transition-duration: 1s;
}
.box:hover {
width: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
linear : 처음부터 끝까지 같은 속도
ease : 느리게 시작하여 점점 빨라졌다가 느리게 끝남
ease-in : 느리게 시작하여 점점 빨라지다가 일정한 속도에 다다르면 같은 속도로 유지
ease-out : 일정한 속도의 등속 변화로 시작해서 점점 느려지면서 끝남
ease-in-out : 느리게 시작하여 느리게 끝남
cubic-bezier(n, n, n, n) : 처음과 끝의 속도를 설정
transitions-delay
CSS속성의 전환 효과를 몇 초 뒤에 시작할지 대기시간을 설정
transition : 1s 3s;
duration과 delay를 같이 설정할 수 있음
transfrom
요소의 변환 효과를 지정
| 함수 | 설명 | 사용 예 |
| translate() | 평행 이동 변환 | |
| rotate() | 회전 변환 | |
| scale() | 크기 변환 | |
| skewX() | X축 기울기 변환 | |
| skewY() | Y축 기울기 변환 | |
| skew | X, Y축 기울기 변환 | |
| matrix() | 2차원 행렬 구조 변환 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section {
position: relative;
}
div {
width: 200px;
height: 100px;
border: 1px dotted black;
background-color: pink;
}
div.box2, div.box3, div.box4, div.box5 {
position: absolute;
}
div.box2 {
transform: translate(400px, 50px);
top: 100px;
}
div.box3 {
transform: rotate(25deg);
top: 200px;
left: 210px;
}
div.box4 {
transform: scale(2,2);
top: 450px;
left: 300px;
}
div.box5 {
transform: skew(40deg, 20deg);
top: 700px;
left: 100px;
}
</style>
</head>
<body>
<section>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
<div class="box3">박스3</div>
<div class="box4">박스4</div>
<div class="box5">박스5</div>
</section>
</body>
</html>
transform 변환 속성 : origin
효과가
'웹프로그래밍 CSS3 > CSS전환 & 변환' 카테고리의 다른 글
| 전환과 변환 3 (0) | 2025.03.16 |
|---|---|
| 전환과 변환 2 (0) | 2025.03.15 |
| 전환과 변환 1 (0) | 2025.03.15 |