html - 如何在保持中心锚定在一个点的同时放大 HTML 文本？

Question

如何使网页上的文本具有动画效果并增加其大小，同时保持中心锚定在一个点上？这是我尝试过的:

http://jsfiddle.net/wnn2v023/1/

但可以看出， anchor 位于 (0, 0) 而不是文本中心。我尝试使用 text-align，但没有得到想要的结果。

HTML:

<button id="button">
  Begin
</button>
<div id="main">
<div id="div">
  Hello World!
</div>  
</div>

CSS:

#main
{
  position: relative; 
}

#div
{
  position:absolute;
  font-size:0em; 
}

@-webkit-keyframes my-animation {
  0%   { font-size: 0em; }
  100% { font-size: 5em; }
}

.effect {
  -webkit-animation: my-animation 1s; /* Safari 4+ */  
  animation: my-animation 1s;
  animation-fill-mode: forwards;  
}

JS:

var e = document.getElementById("button");
var div = document.getElementById("div");
e.addEventListener("click", function()
                  {  
  div.className = "effect";
});

请注意，我无法对 main div 进行任何更改。我还发现使用 font-size 来制作动画效果不是很流畅。

Answer 1

不是为 font-size 属性设置动画，而是为 transform: scale() 设置动画.

在文本上设置所需的 font-size 以及 transform: scale(0) 然后将其动画设置为默认比例 transform: scale( 1):

document.getElementById('button').addEventListener("click", function() {
  document.querySelector('.text').classList.toggle("effect");
});

.container {
  position: relative;
}

.text {
  position: absolute;
  transform: scale(0);
  font-size: 5em;
}


@-webkit-keyframes grow {
  100% { transform: scale(1); }
}

@keyframes grow {
  100% { transform: scale(1); }
}

.effect {
  -webkit-animation: grow 1s forwards;
  animation: grow 1s forwards;
}

<button id="button">Begin</button>

<div class="container">
  <span class="text">Hello World!</span>
</div>