Could we incorporate a backwards typewriter animation?

Question

Could we incorporate a backwards typewriter animation?

Is there a way to delay this animation for 2 seconds before playing in reverse? I came across this online and made some edits, but I'm still new to this (early stages). Can this be achieved using CSS, HTML, and JavaScript? I plan to use this as an alert on my Twitch stream.

CSS:

@import url('https://cdn.streamelements.com/scripts/animate.min.css');
/* GLOBAL STYLES */
body {
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden;
  border-right: .15em solid orange; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .15em; 
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 100%}
  to { width: 0}
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white }

HTML:

<div class="typewriter">
    <h1>
        <span id="username-container"></span>
        is now following.
    </h1>
    <br>
</div>

html css

Answer 1

Answer №1

Here is an example code with an infinite loop animation. Feel free to customize the code to meet your specific needs. The key elements in this code are the animation and KeyFrame. There is also a reverse typewriter effect included.

.typewriter-text1 {
  animation-name: typewriter1;
}



.typewriter-text1{
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 15s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.typewriter-text1::after {
  content: "|";
  position: absolute;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
}

@keyframes typewriter1 {
  0%,
  50%,
  100% {
    width: 0;
  }
  10%,
  40% {
    width: 17em;
  }
}

@keyframes caret {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

<div class="typewriter">
<h1>
  <span class="typewriter-text1">
    is now following.
  </span>
 
</h1>
<div class="typewriter">

Answer 2

Here is an example code with an infinite loop animation. Feel free to customize the code to meet your specific needs. The key elements in this code are the animation and KeyFrame. There is also a reverse typewriter effect included.

.typewriter-text1 {
  animation-name: typewriter1;
}



.typewriter-text1{
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 15s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.typewriter-text1::after {
  content: "|";
  position: absolute;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
}

@keyframes typewriter1 {
  0%,
  50%,
  100% {
    width: 0;
  }
  10%,
  40% {
    width: 17em;
  }
}

@keyframes caret {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

<div class="typewriter">
<h1>
  <span class="typewriter-text1">
    is now following.
  </span>
 
</h1>
<div class="typewriter">

Could we incorporate a backwards typewriter animation?

Answer №1

Similar questions

Encountering a "Cannot modify" error in wp-admin while using inspect element

Is there a way to insert animated images in front of every navigation menu item?

Using jQuery to automatically scroll to the bottom of a div when sliding down

Ways to manipulate a div tag with CSS even when it lacks a class or ID attribute

Issue encountered with sortable table in list.js

Hiding a div using swipe gestures in Angular

Display icons within each table cell row

Issue with ThreeJs: Difficulty loading separate images on top and bottom surfaces

Display the hidden element using jQuery with the !important rule

Electron does not prioritize the @css prefers-color-scheme option

Changing the background color of a React styled-component when hovered over

Problem encountered with a selection menu

Deck.gl's StaticMap component from Mapbox fails to resize properly, causing it to overwrite other elements on the screen

Added the .active state to the menu navigation successfully, however the active color was not implemented

Unforeseen truncation issues within a table causing ellipsis to appear unexpectedly

Transform an array of strings into an array of floating point numbers using AngularJS

template not being loaded with form

Ensure that the images in the final row of the flexbox gallery are consistent in size with the rest

The page remains static even as the function is executed

Determining the cursor's location within a textarea element