Question

我正在尝试在标准ASCII字符上创建CSS动画（特别是：•）。我希望我的动画像this这样的膨胀效果。但是出于某种原因，角色只是从左向右移动。它没有膨胀并恢复到正常大小，正如您在Bootply中看到的那样。

我的代码如下所示：

<div class="container">  
<div id="dot" class="dot">•</div>
  <button id="expandButton">push me</button>
</div>

.dot {
  font-size:3.0rem;
}

.dot-expand {
  color:green;
  animation: dot-expander 3.0s;
}

@keyframes dot-expander {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

我做错了什么？一切看起来都对我不对。谢谢！

Answer 1

这不起作用，因为您尝试使用比例缩放文本元素。相反，使用css创建一个圆形div。

<强> CSS：

.dot {
    border-radius: 50%;
    width: 25px;
    height: 25px; 
    background: rgb(0,0,0);
}

.dot-expand {
  background: rgb(0,255,0);
  animation: dot-expander 3.0s;
}

@keyframes dot-expander {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

<强> HTML：

<div class="container">  
<div id="dot" class="dot">•</div>
  <button id="expandButton">push me</button>
</div>

<强> JavaScript的：

$('#expandButton').on('click', function() {
  alert('here');
  $('#dot').addClass('dot-expand');
});

演示：http://www.bootply.com/9FwMTQQHoO

我建议你增加比例量，因为效果非常微妙。您可能还想在动画结束后删除.dot-expand类，因为当前动画只能播放一次。为了在没有页面重新加载的情况下再次播放动画，需要删除该类并在按下按钮时再次添加。

Answer 2

你可以通过使用scale而不是scale3D来简化CSS动画（特别是因为所有3个值都是相同的比例 - 这里使用scale3D没有任何好处）...也是1的比例之间的差异并且观察者几乎无法理解1.05的比例，特别是如果它需要3秒钟来循环（至少在这种情况下，以元素的大小）。

这是一个工作示例（我编辑了时间并缩放了一点，以便更清楚地显示。）

＆＃13;

$('#expandButton').on('click', function() {
  //toggleClass to turn off the animation on second button click.
  	$('#dot').toggleClass('dot-expand');
	});

＆＃13;

* {margin: 20px; }

.dot {
    border-radius: 50%;
    width: 5px;
    height: 5px; 
    background: rgb(0,0,0);
	 display: block;
}

.dot-expand {
  animation: dot-expander 2s infinite; /* remove 'infinate' if you just want 1 cycle */
}

@keyframes dot-expander {
  0% {
    background: rgb(0,0,0);
    transform: scale(1);
  }

  50% {
  background: rgb(0,255,0);
    transform: scale(2.5);
  }

  100% {
    background: rgb(0,0,0);
    transform: scale(1);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">  
<div id="dot" class="dot"></div>
  <button id="expandButton">push me</button>
</div>

＆＃13;

CSS动画 - 膨胀效果

2 个答案: