transition
property
- 무엇을 변경할 것인가?
duration
- 얼마 만큼의 시간을 가지고 css를 변경한 것인가?
- 단위를 가지고 있으며 단위는 seconds(s) or milliseconds(ms)
<!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;
border:2px dashed teal;
background-color: darkslateblue;
font-size: 50px;
color: white;
/* 전체는 all*/
transition-property: all;
/* 전체는 background-color*/
/*css에 적용하는 시간을 설정*/
transition-duration: 2s;
}
.box:hover{
width: 320px;
background-color: darkviolet;
color:black;
font-size: 60px;
}hover는 찰나의 순간에만 css가 바뀐것을 볼 수 있지만 transition은 시간을 조절하여 자세하게 확인 할 수 있다.
transition-property는 전체에 적용하고 싶다면 all 그렇지 않다면 하나씩 지정해서 적용 시 킬 수 있다.
함께 성장하는 것을 좋아하는 프론트엔드 개발자