CSS 文字写出动画

Question

我正在为客户构建登陆页面。他们的徽标以公司口号为中心，正下方是公司口号，目前口号在页面加载时淡入淡出。

他们现在问是否可以将标语动画化，使其看起来像是在写出来而不是淡入。有人知道如何实现这种效果吗？我被难住了。

如有任何帮助，我们将不胜感激。

HTML:

<div class="image-wrapper">
 <a href="home.html">
  <img src="images/landing_logo2.png" />
 </a>
 <div id="test">
  <p>enter the sunshine state</p>
 </div>
</div>

CSS:

div.image-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

.image-wrapper img {
display: block;
}

#test {
position: absolute;
top: 100%;
width: 100%;
}

#test p {
width: 100%;
font-family: segoe;
font-size: 18px;
text-align: center;
color: #fff;
margin-top: -40px;
-webkit-animation: fadein 8s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 8s; /* Firefox < 16 */
    -ms-animation: fadein 8s; /* Internet Explorer */
     -o-animation: fadein 8s; /* Opera < 12.1 */
        animation: fadein 8s;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

我附上了一个 JSFiddle：

https://jsfiddle.net/1r3fuk27/

Answer 1

无需使用外部库，您可以使用这种方法简单地完成。

var slogan = "enter the sunshine state";
for (var i = 0; i < slogan.length; i++) {
  (function(i) {
    setTimeout(function() {
      $('#test > p').text(slogan.substring(0, i + 1));
    }, 100 * i);
  }(i));
}

@font-face {
  font-family: segoe;
  src: url(fonts/segoesc.ttf);
}
div.image-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.image-wrapper img {
  display: block;
}
#test {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
}
#test p {
  width: 100%;
  font-family: segoe;
  font-size: 18px;
  text-align: center;
  color: #000;
  margin-top: -40px;
  -webkit-animation: fadein 8s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 8s;
  /* Firefox < 16 */
  -ms-animation: fadein 8s;
  /* Internet Explorer */
  -o-animation: fadein 8s;
  /* Opera < 12.1 */
  animation: fadein 8s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="image-wrapper">
  <a href="home.html">
    <img src="http://japesfawcett.com/testsh/images/landing_logo2.png" />
  </a>

  <div id="test">
    <p>enter the sunshine state</p>
  </div>
</div>

如果文本在片段中不可见 here 是 fiddle

Answer 2

您可以使用纯 JavaScript 执行此操作，如下所示 -

function type() {
    var el = document.getElementById('test').querySelector(' p');
    var slogan = el.innerHTML;
    el.innerHTML = '';
    var i = 0;
    setInterval(function() {
        var char = slogan.substr(i, 1);
        el.innerHTML += char;
        i++;
    }, 250); // change 250 as per typing speed you need
}
type(); // call the function whenever you need

JSFiddle

CSS 文字写出动画

CSS Text Written Out Animation

html

javascript

css

animation

centering