Question

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

如何在中心启动动画？

Bootstrap代码：

<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/

CSS键入动画更改文本放置

1 个答案: