.asprint {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: dy 3s steps(60, end) infinite;
    animation: dy 3s steps(50, end) infinite;
}

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

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

上方为CSS代码，下方为HTML代码

<p class="asprint">纯CSS简单实现炫酷打字效果~~~</p>

纯CSS简单实现炫酷打字效果~~~