transition : 요소의 속성 변화를 일정 시간에 걸쳐 일어나도록 하는것
=> transition-duration : 몇초동안 재생할지
=> transition-delay : 몇초후에 재생할지
=> transition-property : 어떤속성을 변형할지
<style>
.box{
width: 100px;
height: 100px;
background-color: forestgreen;
/*마우스 올릴때 내릴때 모두 적용*/
transition-duration: 3s;
transition-property: width,background-color;
}
.box:hover{
background-color: tomato;
width: 500px;
transition-delay: 1s;
/*이벤트에 적용 : 마우스를 내릴대는 적용x*/
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
1초뒤에 길이가 길어지며 주황색으로 변한다.
