# Typewriter-style CSS test

**URL:** <https://community.glideapps.com/t/typewriter-style-css-test/73272>\
**Category:** Ask for Help\
**Created:** [May 11, 2024, 7:42am UTC](https://community.glideapps.com/t/typewriter-style-css-test/73272 "2024-05-11T07:42:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 11, 2024, 7:42am UTC](https://community.glideapps.com/t/typewriter-style-css-test/73272/1 "2024-05-11T07:42:45Z")

</div>

I couldn’t get it to work for me. Nothing’s happening.  
I entered the HTML into a rich text component. Assigned the css class to this component. And I copied the code below into the css input field for app Appearance.  
Did I miss a step?

.writer {  
display: inline-block;  
overflow: hidden;  
border-right: .07em solid black;  
white-space: nowrap;  
letter-spacing: .03em;  
line-height: 1.2;  
padding: 0.003em 0;  
width: auto;  
max-width: 0;  
animation:  
typing 2.5s steps(40, end) forwards,  
blink-caret .75s step-end infinite;  
}

@keyframes typing {  
from { max-width: 0; }  
to { max-width: 100%; }  
}

@keyframes blink-caret {  
from, to { border-color: transparent; }  
50% { border-color: black; }  
}

Reference: [CSS Library](https://css-library.glide.page/dl/library/s/8836b3/r/WEDNMWS-QJWBBs0QdmhZuA)

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 11, 2024, 8:02am UTC](https://community.glideapps.com/t/typewriter-style-css-test/73272/2 "2024-05-11T08:02:31Z")

</div>

nevermind. I got it to work by editing the text that came before the CSS.

This part:  
//AND HERE IS THE CSS

It was incomplete.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 11, 2024, 11:36pm UTC](https://community.glideapps.com/t/typewriter-style-css-test/73272/3 "2024-05-11T23:36:50Z")

</div>

Not sure what you mean by “incomplete”. Can you point out that part and how you changed it so we can make a correction in the library?

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 12, 2024, 1:45am UTC](https://community.glideapps.com/t/typewriter-style-css-test/73272/4 "2024-05-12T01:45:28Z")

</div>

hi @ThinhDinh. Maybe incomplete was the wrong word… Usually, we can copy the codes in the Library as is and it would work but in this case I had to close off the top text before it could work (see image below).

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/a/ea5a9de54599df98cba787c1fed0c14874a4d9af.png)

I don’t know code so I didn’t recognize that it had to be either omitted or edited.

In the end I did it like this because I noticed you guys usually write this way:

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/8/68fe3bf71ab102d872f9cfbceabb8b8e67bb0a36.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 12, 2024, 1:47am UTC](https://community.glideapps.com/t/typewriter-style-css-test/73272/5 "2024-05-12T01:47:58Z")

</div>

The line that starts with `/*` is a comment line. You could have simply left that line out 🙂

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 12, 2024, 1:53am UTC](https://community.glideapps.com/t/typewriter-style-css-test/73272/6 "2024-05-12T01:53:39Z")

</div>

Yes 😆, I only realized that after it didn’t work. I don’t know about the code language and there’s usually some string so I figured it was all good, lol.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [May 19, 2024, 1:53am UTC](https://community.glideapps.com/t/typewriter-style-css-test/73272/7 "2024-05-19T01:53:45Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.