TakayoshiKochi/jsbin.caloj.css

## jsbin.caloj.css
@keyframes rect {
  0% { width: 20px; height: 100px; }
  100% { width: 100px; height: 20px;
         border-radius: 10px; }
}

div#rect {
  position: absolute;
  top: 20px;
  left: 100px;
  width: 80px;
  height: 80px;
  background-color: green;
  animation-name: rect;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

## jsbin.caloj.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="rect"></div>
</body>
</html>
	@keyframes rect {
	0% { width: 20px; height: 100px; }
	100% { width: 100px; height: 20px;
	border-radius: 10px; }
	}

	div#rect {
	position: absolute;
	top: 20px;
	left: 100px;
	width: 80px;
	height: 80px;
	background-color: green;
	animation-name: rect;
	animation-duration: 3s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="rect"></div>
	</body>
	</html>