javascript - 如何在 JavaScript 中制作具有效果的文本 "pop out"

Question

我在谷歌中进行了大量搜索，以找到一种在 JavaScript 的帮助下为我的 HTML 网站上的文本添加动画效果的方法。所以我的想法是，当有人打开我的网站时，我想缩放文本元素以创建弹出效果，以可视化该文本与鼠标交互(可点击、可更改，等等...)。

你知道是否存在可以以这种方式为我的文本设置动画的函数吗？我只想展示一次这种效果，所以我不想重复。这是我要制作动画的文本:

<p class="info-text">Das ist mein Text welcher einen Pop-out effect benötigt</p>

解决方案
非常感谢尼基塔!这是工作解决方案:

.my-text {
  animation: pop 0.4s ease-in-out;
  animation-delay: 1s;
}

@keyframes pop {
  50%  {
    transform: scale(1.25);
  }
}

<p class="my-text">Hello everyone :)</p>

Answer 1

如果您想在页面加载时恰好弹出动画，只需为带有文本的元素添加一个类。并在 CSS 中编写所需的动画。并且在页面加载后，弹出动画将播放并播放一次。

<div class="pop"></div>
<div class="pop with-delay"></div>

并添加样式(如果你想添加一些延迟，在 css/styles 中添加“animation-delay”):

.pop{
  animation: pop 0.25s ease-in-out;
}
.with-delay {
  animation-delay: 1s;
}
@keyframes pop{
  50%  {
    transform: scale(1.25);
  }
}

举个例子: https://codepen.io/anon/pen/jQGBdm