Typing effect with CSS

Typing effect with CSS:


CSS is powerful, you can do a lot of things without JS, also it’s important because it controls all design-related aspects of your website. Typography, colors, page layouts, and any other visual aspects of your website are all controlled by mighty CSS.

I rely on CSS, which means I use Javascript as little as possible. Today I will show you the typing effect without any JavaScript!

Let’s jump to the code!

This is one cool effect
Enter fullscreen mode Exit fullscreen mode

And a little bit of CSS

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
.type {
  width: 35%;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
@keyframes typing {
  from {
    width: 0
@keyframes blink {
  50% {
    border-color: transparent
Enter fullscreen mode Exit fullscreen mode

This is our result:

Thank you all!


from Tumblr https://generouspiratequeen.tumblr.com/post/632233202461900800

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s