css动画——文本飞入（通过letter-spacing实现）

<template>
    <div>
        <p class="flyText">我是一段飞入的文字内容</p>
    </div>
</template>
<style scoped>
    .flyText {
        width: 8em;
        margin: auto;
        white-space: nowrap;
        animation: textIn 1s both;
    }
    @keyframes textIn {
        0% {
            opacity: 0;
            letter-spacing: -200px;
        }
        60% {
            letter-spacing: 5px;
        }
        100% {
            opacity: 1;
            letter-spacing: 0;
        }
    }
</style>