html - CSS 打字动画更改文本位置

Question

我在我的网站上加入了 Bootstrap 以使其具有响应性。我还在我的代码中添加了 CSS 动画。但是，这会使文本从页面的中心开始，从页面的最左侧开始，完成动画，然后将文本移到中心。

如何在中心本身启动动画？

引导代码:

<header id="top" class="header">
    <div class="text-vertical-center">

        <h1 class="css-typing">Hi, welcome to my website.</h1>
        <h3 class="css-typing">Let's get started.</h3>
        <br>
        <a href="#about" class="btn btn-primary">Let's Get Started.</a>
    </div>
</header>

CSS 代码:

.css-typing
{
    width: 100%;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 3s steps(50, end);
    animation: type 3s steps(50, end)1;
}

@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0;  }
}

任何想法或帮助都会很棒。

谢谢!

Answer 1

将动画文本放入 <span> ，这个跨度将有类 typing相反:

<h1><span class="typing">Hi, welcome to my website.</span></h1>
<h3><span class="typing">Let's get started.</span></h3>

并添加display: inline-block;对于 typing类:

.typing
{
    ...
    display: inline-block;
}

演示:http://jsfiddle.net/ctedopow/1/