Css文字动画

【问题标题】：Css text animationCss文字动画
【发布时间】：2016-01-06 07:56:50
【问题描述】：

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

我有这个标志（这是一个文字）：{K} 当用户打开一个页面（并且当光标在上面时）转换是从 {K} ---> 到 {Katartika}。左括号是固定的，右括号转到右侧显示整个单词。几秒钟后，它又回到 {K}。

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

【解决方案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>

【讨论】：