CSS改革ASCI形象

Question

如何使ASCII图像弹出并重新形成？

.fly-in-text {list-style: none;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);}
            .fly-in-text li {margin-right: 50px;
                transition: all 2.5s ease;}
            .fly-in-text.hidden li:nth-child(1) { transform: translateX(-200px) translateY(-200px); }

       <div><ul class="fly-in-text hidden" onclick="play()">
            <li>.-"-.</li>
        </ul>