Javascript CSS文本写出动画

我正在为客户建立登录页。他们的标志正下方以公司口号为中心，目前该口号会在页面加载时淡出

他们现在问，是否可以将标语动画化，使其看起来像是在写出来，而不是逐渐消失。有人对如何达到这种效果有想法吗？我被难住了

任何帮助都将不胜感激

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>

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; }
}

进入阳光状态

CSS:

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

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; }
}

div.image-wrapper{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
}
.图像包装器img{
显示：块；
}
#试验{
位置：绝对位置；
最高：100%；
宽度：100%；
}
#测试p{
宽度：100%；
字体系列：segoe；
字号：18px；
文本对齐：居中；
颜色：#fff；
利润上限：-40px；
-webkit动画：fadein 8s；/*Safari、Chrome和Opera>12.1*/
-moz动画：fadein 8s；/*Firefox<16*/
-ms动画：fadein 8s；/*Internet Explorer*/
-o-动画：fadein 8s；/*Opera<12.1*/
动画：Fadein8s；
}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:1；}
}

我附加了一个JSFIDLE：

---

无需使用外部库，您只需使用此方法即可完成

var标语=“进入阳光状态”；
对于（变量i=0；i<1.length；i++）{
（职能（一）{
setTimeout（函数（）{
$（'#test>p'）。文本（标语。子字符串（0，i+1））；
}，100*i）；
}（i） ）；
}

@font-face{
字体系列：segoe；
src:url（字体/segoesc.ttf）；
}
div.image-wrapper{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
}
.图像包装器img{
显示：块；
}
#试验{
位置：绝对位置；
最高：100%；
宽度：100%；
文本对齐：居中；
}
#测试p{
宽度：100%；
字体系列：segoe；
字号：18px；
文本对齐：居中；
颜色：#000；
利润上限：-40px；
-webkit动画：fadein 8s；
/*Safari、Chrome和Opera>12.1*/
-moz动画：fadein 8s；
/*Firefox<16*/
-ms动画：fadein 8s；
/*Internet Explorer*/
-o-动画：fadein8s；
/*歌剧<12.1*/
动画：Fadein8s；
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
/*Firefox<16*/
@-moz关键帧fadein{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
/*Safari、Chrome和Opera>12.1*/
@-webkit关键帧fadein{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
/*Internet Explorer*/
@-ms关键帧fadein{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
/*歌剧<12.1*/
@-o-关键帧fadein{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

进入阳光状态

您可以使用纯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

---

lol可能重复是的，我忘记删除我用来调试的代码了。。。如果它有效，您可以接受它作为答案；）谢谢，这是一个很好的解决方案-我唯一的问题是更改字体和文本颜色，你知道我怎么做吗？Oops@shaz抱歉，我把你误认为OP了！：D@dash167：很高兴能帮上忙，也很高兴知道你找到了答案；）