সিএসএস

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  width: 50px;
  height: 50px;
  background: pink;
  border-radius: 50px;
  transition: width 2s;
}

div:hover {
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  width: 50px;
  height: 50px;
  background: pink;
  border-radius: 50px;
  transition: width 2s;
  transition-delay: 2s;
}

div:hover {
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  width: 50px;
  height: 50px;
  background: pink;
  border-radius: 50px;
  transition: width 2s;
  transition-duration: 2s;
}

div:hover {
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  width: 50px;
  height: 50px;
  background: pink;
  border-radius: 50px;
  transition: width 2s;
  transition-timing-function: linear;
}

div:hover {
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<div></div>

</body>
</html>