[CSS] transition

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* transition : 요소에 적용되는 속성값이 변할 때

일정 시간에 걸쳐 일어나도록 하는 것

=> transition-duration : 몇 초동안 재생할지

=> transition-delay : 몇 초 후에 재생할지

=> transition-property : 어떤 속성을 변형할지

.box {

width: 100px;

height: 100px;

background-color: sandybrown;

/* transition-duration: 2s; */

/* transition-delay: 1s; */

transition-property: background-color;

/* 요소에 직접 적용 : 마우스 올릴 때, 내릴 때 모두 적용 */

}

.box:hover {

background-color: seagreen;

border-radius: 50%;

transition-duration: 2s;

/* 이벤트에 적용 : 마우스 내릴 때 적용X */

}

</style>

</head>

<body>

</body>

</html>

.