[css]拡大の中心を中央にする

CSSアニメーションを用いて正方形を徐々に大きくしていきたいのですが、左上の一点を中心に大きくなっていくような感じがします。　正方形の真ん中を中心に大きくしたい場合はどのようにすればよいのでしょうか？

（説明の意図がわからない場合は修正依頼お願いします）

html
1<body>
2  <div id="box"></div>
3<body>

css
1#box{
2  top:100px;
3  left:200px;
4  width:50px;
5  height:50px;
6
7  animation-name:big;
8  animation-duration:1s;
9}
10
11@keyframes big{
12  0%{
13    width:0px;
14    height:0px;
15  }
16 100%{
17    width:50px;
18    height:50px;
19  }
20}

行動規範の内容に同意します

回答3件

ベストアンサー

transform-origin:50% 50%でtransformプロパティをアニメーション化するのはいかが？

CSS
1#box{
2	background-color:blue;
3  top:100px;
4  left:200px;
5  width:50px;
6  height:50px;
7  transform-origin: 50% 50%;
8  animation-name:big;
9  animation-duration:1s;
10}
11
12@keyframes big{
13  0%{
14    transform: scale(0);
15  }
16 100%{
17    transform: scale(1);
18  }
19}

投稿2018/03/24 15:26

defghi1977

総合スコア4756

transform-originで基準点を指定してtransform: scale(...)で大きさを変えればいいのではないでしょうか。

JSFiddle Demo

投稿2018/03/24 15:25

karamarimo

総合スコア2555

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			#box{
8				margin: 275px auto;
9				width:50px;
10				height:50px;
11				background: #000;
12				animation-name:big;
13				animation-duration:1s;
14			}
15			@keyframes big{
16				0%{
17					width:0px;
18					height:0px;
19					margin-top:300px;
20				}
21				100%{
22					width:50px;
23					height:50px;
24					margin-top:275px;
25				}
26			}
27		</style>
28	</head>
29	<body>
30		<div id="box">
31
32		</div>
33	</body>
34</html>