// 전환, transition
- 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 속성
- 수치형 속성에만 적용 가능(숫자, 색상)
- transition-property: 트랜지션을 적용할 속성
※ all : 모든 속성 - transition-duration: 트랜지션이 적용되는 시간
- transition-timing-function: 트랜지션 가속도
~ linear / ease / ease-in ease-out / ease-in-out
- ease: 기본값
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
border: 10px solid black;
width: 200px;
height: 200px;
background-color: gold;
margin: 100px;
transition-property: all;
transition-duration: 3s;
}
#box:hover {
width: 400px;
height: 400px;
background-color: tomato;
font-size: 5rem;
}
</style>
</head>
<body>
<div id="box">상자</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
border: 10px solid black;
width: 200px;
height: 200px;
background-color: gold;
margin: 100px;
transition-property: all;
transition-duration: 3s;
}
body:hover #box{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div id="box">상자</div>
</body>
</html>- transition-timing-function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#list {
border: 1px solid black;
width: 800px;
}
#list .box {
width: 100px;
height: 50px;
margin: 15px 0;
transition-property: all;
transition-duration: 3s;
}
#box1 {
background-color: tomato;
transition-timing-function: linear;
}
#box2 {
background-color: gold;
transition-timing-function: ease
}
#box3 {
background-color: orange;
transition-timing-function: ease-in
}
#box4 {
background-color: cornflowerblue;
transition-timing-function: ease-out
}
#box5 {
background-color: green;
transition-timing-function: ease-in-out
}
#list:hover .box {
margin-left: 700px;
}
</style>
</head>
<body>
<div id="list">
<div id="box1" class="box">linear</div>
<div id="box2" class="box">ease(default)</div>
<div id="box3" class="box">ease-in</div>
<div id="box4" class="box">ease-out</div>
<div id="box5" class="box">ease-in-out</div>
</div>
</body>
</html>- transition-delay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#list {
border: 1px solid black;
width: 800px;
}
#list .box {
width: 100px;
height: 50px;
margin: 15px 0;
transition-property: all;
transition-duration: 3s;
}
#box1 {
background-color: tomato;
transition-delay: 0s;
}
#box2 {
background-color: gold;
transition-delay: 0.5s;
}
#box3 {
background-color: orange;
transition-delay: 1s;
}
#box4 {
background-color: cornflowerblue;
transition-delay: 1.5s;
}
#box5 {
background-color: green;
transition-delay: 2s;
}
#list:hover .box {
margin-left: 700px;
}
</style>
</head>
<body>
<div id="list">
<div id="box1" class="box">linear</div>
<div id="box2" class="box">ease(default)</div>
<div id="box3" class="box">ease-in</div>
<div id="box4" class="box">ease-out</div>
<div id="box5" class="box">ease-in-out</div>
</div>
</body>
</html>//애니메이션, Animation
- transition + 버전업
- animation-name: 식별자명
- 움직임을 정의한다. - animation-duration: 시간
- 소요시간을 정의한다. - animation-fill-mode: 애니메이션이 끝난 후 어떤 상태를 유지할 것인지 설정
~ backgwards: 초기값, 기본값
~ forwards: 변화후 값 - animation-timing-function
- animation-iteration-count: 반복 횟수
- animation-direction: 방향 정의
~ reverse: 반대로
~ alternate: 횟수마다 반대로 (정방향 -> 역방향 -> 정방향....)
~ alternate-reverse: reverse로 시작해서 alternate
@keyframes 식별자명 {
/* 어떤 속성이(from) 어떤 변화를(to) 일으키는지? */
from { > 0s
속성:값
}
to { > animation-duration으로 적용한 기간
속성:값
}
}
@keyframes 식별자명 { > 시간을 세분화할 수도 있다.
0% { }
25% { }
50% { }
75% { }
100% { }
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
border: 1px solid black;
width: 150px;
height: 150px;
background-color: gold;
}
#box:hover {
width: 300px;
animation-name: key1;
animation-duration: 1s;
}
@keyframes key1 {
/* 어떤 속성이 어떤 변화를 일으키는지? */
from {
width: 150px;
}
to {
width: 300px;
}
}
</style>
</head>
<body>
<div id="box">상자</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
border: 1px solid black;
width: 150px;
height: 150px;
background-color: gold;
}
body:hover #box{
animation-name: key3;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
@keyframes key3 {
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(300px, 0px);
}
50% {
transform: translate(300px, 300px);;
}
75% {
transform: translate(0px, 300px);
}
100% {
transform: translate(0px, 0px);;
}
}
</style>
</head>
<body>
<div id="box">상자</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<style>
body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
body::-webkit-scrollbar {
display: none;
}
.material-symbols-outlined {
font-size: 5rem;
font-weight: bold;
transform: scale(150, 150);
opacity: 0;
animation-name: key-logo;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes key-logo {
from {transform: scale(150, 150); opacity: 0; }
to {transform: scale(1, 1); opacity: 1; }
}
.material-symbols-outlined:nth-child(1) {
color: tomato;
animation-delay: 0s;;
}
.material-symbols-outlined:nth-child(2) {
color: gold;
animation-delay: 0.8s;
}
.material-symbols-outlined:nth-child(3) {
color: dodgerblue;
animation-delay: 1.6s;
}
</style>
</head>
<body>
<span class="material-symbols-outlined">favorite</span>
<span class="material-symbols-outlined">heart_check</span>
<span class="material-symbols-outlined">cardiology</span>
</body>
</html>'클라이언트 > CSS' 카테고리의 다른 글
| CSS 변수 (0) | 2023.11.07 |
|---|---|
| CSS 속성 - 변형(Transform) (0) | 2023.11.06 |
| CSS 속성 - z-index (0) | 2023.11.06 |
| CSS 속성 - Position (0) | 2023.11.06 |
| CSS 속성 - Grid (0) | 2023.11.06 |
