从当前位置开始CSS类型文本动画而不是0宽度

-1

我是新来的CSS动画，并试图获得文本输入效果。我使用各种在线教程的参考资料来实现它。从当前位置开始CSS类型文本动画而不是0宽度

问题：当我加入这个div我的网站容器内说900px宽与万物对准中心，动画从0像素宽度开始，得到完成和笨拙滑入中心对齐。

我希望动画不要滑到中心位置，而是要从中心位置开始并优雅地结束。

这是我的代码：

body { 
 
    width: 900px; 
 
    text-align: center; 
 
} 
 
.typetext { 
 
    /* color: lime; */ 
 
    /* font-family: "Courier";*/ 
 
    font-size: 20px; 
 
    /* margin: 10px 0 0 10px;*/ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    animation: type 4s steps(60, end); 
 
} 
 
.typetext:nth-child(2) { 
 
    animation: type2 8s steps(60, end); 
 
} 
 
@keyframes type { 
 
    from { 
 
    width: 0; 
 
    } 
 
} 
 
@keyframes type2 { 
 
    0% { 
 
    width: 0; 
 
    } 
 
    50% { 
 
    width: 0; 
 
    } 
 
    100% { 
 
    width: 100; 
 
    } 
 
}

<body> 
 
    <div class="row lead typetext" id="anim5" style="clear:both; padding-top:10px; font-size:25px; font-weight:600;"> 
 
    <div style="width: 100%; margin: 0 auto;">Getting you investment ready and focused on growth</div> 
 
    </div> 
 
</body>

请指导

来源

2015-07-20 Siddharth Srivastva

我添加显示：内联块;到.typetext类。我希望这是你的目标是什么

body { 
 
    width: 900px; 
 
    text-align: center; 
 
} 
 
.typetext { 
 
    /* color: lime; */ 
 
    /* font-family: "Courier";*/ 
 
    font-size: 20px; 
 
    /* margin: 10px 0 0 10px;*/ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    width: 100%; 
 
    animation: type 4s steps(60, end); 
 
} 
 
.typetext:nth-child(2) { 
 
    animation: type2 8s steps(60, end); 
 
} 
 
@keyframes type { 
 
    from { 
 
    width: 0; 
 
    } 
 
} 
 
@keyframes type2 { 
 
    0% { 
 
    width: 0; 
 
    } 
 
    50% { 
 
    width: 0; 
 
    } 
 
    100% { 
 
    width: 100; 
 
    } 
 
}

<body> 
 
    <div class="row lead typetext" id="anim5" style="clear:both; padding-top:10px; font-size:25px; font-weight:600;"> 
 
    <div style="width: 100%; margin: 0 auto;">Getting you investment ready and focused on growth</div> 
 
    </div> 
 
</body>

来源

2015-07-20 13:35:52

在某种程度上是的。但我希望文字从左侧开始/显示，而不是从右侧或中间开始。任何方式来做到这一点 –

将.typetext div封装到另一个div。让我们打电话给这个div .mycontainer。 .mycontainer {width：600px; text-align：left; margin：0 auto;}。这工作，但你需要现在的文本的长度。 –

.typetext { 
    /* color: lime; */ 
    /* font-family: "Courier";*/ 
    font-size: 20px; 
    /* margin: 10px 0 0 10px;*/ 
    white-space: nowrap; 
    overflow: hidden; 
    width: 565px; 
    animation: type 4s steps(60, end); 
}

来源

2015-07-20 13:45:32 Stile

没有。它只是减少整个div不居中并显示全文 –

见jsfiddle

body { 
 
    
 
text-align:center; 
 
} 
 
.typetext { 
 
    /* color: lime; */ 
 
    /* font-family: "Courier";*/ 
 
    font-size: 20px; 
 
    /* margin: 10px 0 0 10px;*/ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    
 
    -webkit-animation: type 5s; 
 
} 
 
@keyframes type { 
 

 
0% {width: 0px;margin:0 auto;} 
 
    100% {width: 100%; margin:0 auto;} 
 
}

<body> 
 
    <div class="row lead typetext" style="padding-top:10px; font-size:25px; font-weight:600;"> 
 
    <div>Getting you investment ready and focused on growth</div> 
 
    </div> 
 
</body>

来源

2015-07-20 14:04:59 imGaurav

谢谢，但我想从左侧开始。我怎样才能做到这一点 –

![<style> 
body { 
    width: 900px; 
    text-align: center; 
    margin: auto; 
    border: solid black 1px; 
} 
.typetext { 
    /* color: lime; */ 
    /* font-family: "Courier";*/ 
    font-size: 20px; 
    /* margin: 10px 0 0 10px;*/ 
    white-space: nowrap; 
    overflow: hidden; 
    width: 565px; 
    animation: type 4s steps(60, end); 
} 
.typetext:nth-child(2) { 
    animation: type2 8s steps(60, end); 
} 
@keyframes type { 
    from { 
    width: 0; 
    } 
} 
@keyframes type2 { 
    0% { 
    width: 0; 
    } 
    50% { 
    width: 0; 
    } 
    100% { 
    width: 100; 
    } 
} 
</style> 
<body> 
    <div class="row lead typetext" id="anim5" style="clear:both; padding-top:10px; font-size:25px; font-weight:600; margin: 0 165px"> 
    <div style="width: 100%; margin: 0 auto;">Getting you investment ready and focused on growth</div> 
    </div> 
</body>][1]

来源

2015-07-20 14:46:42 Stile

从当前位置开始CSS类型文本动画而不是0宽度

回答

相关问题