transition
delay
- 트랜지션을 지연
timing-function
- css가 적용되면서 가지는 중간과정을 차례대로 보여줄 건지 빠르게 넘기던지 느리게 넘기던지 설정
<!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">
<link rel="stylesheet" href="styles/main.css">
<title>Document</title>
</head>
<body>
<div class="box">
Hover Me!
</div>
</body>
</html>.box{
width: 300px;
height: 80px;
background-color: blue;
font-size: 50px;
color: white;
transition-property: all;
transition-duration: 3s;
transition-delay: 1s;
}
.box:hover{
background-color: red;
}css hover를 사용하여 css에 변화를 주면 바로 적용이 되지만 transition-delay를 사용하면 바로 변화주지 않고 설정한 시간 후에 적용되는 것을 확인 할 수 있다. 요소들이 여러개가 있으면 차례대로 움직이게 할 수 있다.
transition-timing-function
.box{
width: 300px;
height: 80px;
background-color: blue;
font-size: 50px;
color: white;
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
}
.box:hover{
background-color: red;
height: 400px;
}css hover를 통한 css를 transition-timing-function을 통해 변화 하는과정을 자세히 볼 수 있다.
.box{
width: 300px;
height: 80px;
background-color: blue;
font-size: 50px;
color: white;
transition-property: all;
transition-duration: 3s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
/* 위에 4개의 코드와 같다. */
transition: all 3s ease-in-out 1s;
}
.box:hover{
background-color: red;
height: 400px;
}transition을 통해 property,duration,timing fucntion,delay순으로 한번에 정의하여 사용 있으며 위 코드와 같이 4개의 transition 코드를 한줄로 같은 값의 코드처럼 적용 할 수 있다.
함께 성장하는 것을 좋아하는 프론트엔드 개발자