Css文字动画

Question

我想创建这样的徽标（文本）动画：

我有这个徽标（是文字）：{K}用户打开页面时（光标悬停时），转换是从{K} --->到{Katartika}。左括号是固定的，而右括号则在右侧显示整个单词。几秒钟后，它返回到{K}。

Answer 1

您可以通过CSS过渡来做到这一点。我很快就做到了，也许这不是最好的解决方案，但这是我的第一个主意：

div {
  overflow: hidden;
  *zoom: 1;
}
span,
h1 {
  margin: 0;
  font-size: 1.6em;
  font-weight: bold;
  float: left;
  cursor: pointer;
}
h1 {
  width: 1.18em;
  overflow: hidden;
  transition: width 0.4s;
}
h1:hover {
  width: 4.24em;
}

<div>
  <h1>{Katarina</h1><span>}</span>
</div>
<p>^ HOVER ME! ^</p>

Answer 2

使用html和CSS在下面的链接中显示很棒的文本动画

https://youtu.be/ux-RbwSOIbI