

<!DOCTYPE html>
<head>
<title>transition 속성</title>
<meta charset="utf-8">

<style>
#one{width: 100px; height: 50px;background-color:yellow;
transition:width 2s;}
#one:hover{width: 200px;}

#two{width: 100px; height: 50px;background-color:yellow;
transition:width, background-color, 2s;}
#two:hover{width: 200px;background-color:red;}
 
#three{width: 100px; height: 50px;background-color:yellow;
transition:width 2s ease-in;}
#three:hover{width: 200px;} 

#four{width: 100px; height: 50px;background-color:yellow; font-size:14px;
transition: width, height, font-size, 2s, 5s, ease-in;}
#four:hover{width: 200px; height: 200px;font-size:20px;} 


</style>
</head>

<body>
 <div id="one">
</div>
<br>
  <div id="two">
</div>
<br>
 <div id="three">
</div>
<br>
 <div id="four">
font size 14에서 20
</div>

</body>

</html>