Creating a dynamic CSS animation with multiple spans for typing effect

I have made some progress with this project.

Here is the link to what I have so far: http://codepen.io/tacrossman/pen/GJglH

However, my goal is to have the cursor blinking animation running after each new word (span) is written out.

When I attempt to add the following code:

.type:after {   
    content:"_";    
    opacity: 0;     
    animation: cursor 1s infinite; 
}

It doesn't produce the desired effect. I suspect there might be a conflict in the animation since I am essentially trying to run an animation within something that is already animating.

If you require any further information, please do not hesitate to ask. Thank you!

htmlcssanimation

Answer №1

Does this look right? I believe this is the desired outcome you were aiming for.

Check out the updated Codepen demonstration

span > span {
    animation: cursor 1s infinite;
}

I also managed to address a few issues with the animation, resolving some overlapping problems that were occurring.

Answer №2

Do you prefer Safari or Chrome? As a Firefox user, I've noticed an issue related to inconsistent prefixes in your code.

Check out the revised code below without the webkit prefixes. Feel free to add them back if needed, but since they seem to be causing problems for you, I assume they're not required:

Working JSBIN link: http://jsbin.com/ITokiXO/1/edit

.type{
    position: absolute;
    opacity: 0;
    width: 12ch;
    overflow: hidden;
    animation: words 18s steps(12) infinite 0s;
}
.type:nth-child(2) { 
  -webkit-animation-delay: 3s; 
  animation-delay: 3s;
}
.type:nth-child(3) { 
  -webkit-animation-delay: 6s; 
  animation-delay: 6s;
}
.type:nth-child(4) { 
  -webkit-animation-delay: 9s;
  animation-delay: 9s; 
}
.type:nth-child(5) { 
  -webkit-animation-delay: 12s; 
  animation-delay: 12s; 
}
.type:nth-child(6) { 
  -webkit-animation-delay: 15s;
  animation-delay: 15s; 
}

@keyframes words {
  0% { opacity: 0; width:0; }
  2% { opacity: 1;}
  14% { opacity: 1; width: 12ch;}
  15% { opacity: 0; }
}

.cursor:after {
  content:" _";
  opacity: 0;
  animation: cursor 1s infinite;
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Answer №3

Here is a unique way to create a type effect using the steps in the animation function:

Check it out here!

@-webkit-keyframes typing {
from { width: 0 }
to { width:14em }
}

@keyframes typing {
from { width: 0 }
to { width:14em }
}

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

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

body { font-family: Consolas; }

h1 { 
font-size:150%;
width:14em;
white-space:nowrap;
overflow:hidden;
border-right: .1em solid #333;

-webkit-animation: typing 13s steps(26, end), 
                    caret 0.5s step-end infinite;
animation: typing 13s steps(26, end), 
                    caret 0.5s step-end infinite;
}

This example uses 26 steps to match the number of characters in the H1 tag.

<h1>Uniquely Crafted Typing Animation by Jonathan.</h1>

You can experiment with adding animations after words as well, but it may require JavaScript for accurate word length calculations.

It's also a good practice to include properties without vendor prefixes for broader browser compatibility. Firefox, for example, does not require them for the animation property.

Check browser support here!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the height of a container dynamically in React while flex items wrap using CSS

In my React project, I have a container called "answers-container" with multiple buttons inside it, laid out using flexbox with flex-wrap: wrap to allow them to wrap onto the next line when the container width is exceeded. However, I'm facing an issu ...

javascripthtmlcssreactjs

Troubleshooting problem with text overlaying images upon hovering in CSS

Several months ago, I successfully implemented a cool effect on a Shopify website that I had designed. However, recently the client decided to switch to a new theme without my knowledge, and now one of my CSS tricks is no longer working. If you look at t ...

htmlcsshovercentering

Utilizing a Variety of Animations with D3 (version 5)

I am currently working on an animation that involves fading out text in a list and collapsing the list when the heading is clicked. However, I am facing a few issues with the code provided in this example. d3.select('.panel-heading') .on(&apos ...

javascriptanimationd3.jstransition

Issue with responsive design: Media queries not applying max-width

GOAL I want the content of my page to adjust to screen sizes that are smaller than 600px wide. ISSUE When using the responsive tool in Chrome, preset screen sizes like iPhone X do not apply media queries properly. Even manually adjusting the screen size ...

htmlcssresponsive-designmedia-queriesresponsive

Design a clickable div element embedded within an interactive article using HTML5

Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code: HTML: <article id=&apo ...

javascriptcsshtml

Modify the select input's border color when it is in focus

My select input's focus color is not changing, and I'm struggling to figure out the proper override. .form-control:focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; } .forma #kome { border-color: #8e8e8e; -w ...

htmlcss

What could be causing my CSS and Bootstrap.css styles not to be implemented on my webpage?

While working on my Ruby on Rails application, I am trying to customize the design to resemble (which can be downloaded from ). However, I am facing an issue where the style sheets are not being applied. I have moved the style sheets from the bootstrap/c ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Exploring the Differences in Site Navigation: PHP/HTML, Ajax, and CSS/Javascript

Lately, I've been weighing the pros and cons of using AJAX for my website navigation to transfer only necessary updated HTML elements. Alternatively, if there isn't a significant difference between new elements and current ones, just loading the ...

phpjavascripthtmlcssajax

Is it possible to shift the "ul" block of the navigation bar to the right without compromising the responsiveness toggle button functionality?

I'm currently using bootstrap NavBar and encountering an issue where moving the ul block to the right is disabling the toggle button responsiveness. <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" c ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

Struggling to determine if the checkbox has been ticked?

I have integrated a like button on my website using socket io to ensure that it updates for all users when the like button is clicked. I have successfully implemented a like() function that emits liked, increments a counter, and displays it on the page. Ho ...

javascripthtmlnode.jscheckboxsocket.io

Positioning elements at the bottom of the container

There is a dilemma that only those in the world of web development will understand. Beware! I have envisioned a layout for a website I am constructing. The concept involves tilted <hr/> elements on the page, with text wrapping around them (refer to ...

javascripthtmlcss

table rows are styled with hover effects and alternating colors using CSS

Styles for even and odd table rows are set, but hovering over the table rows is not working. Test it out here: http://jsfiddle.net/w7brN/ CSS style : #table_even tr:hover { background-color:#fffbae!important; } /* hover effect */ #table_even tr:nth-ch ...

htmlcss

The icons from MaterializeCSS are not displaying correctly on the navbar within an Angular 7 project

Having an issue implementing MaterializeCSS Icons on the navbar. The arrow-drop_down icon is not displaying correctly, showing only text instead. Oddly enough, the icons render properly on other pages except for the app.component.html file. I attempted to ...

javascripthtmlcssmaterializeangular7

In my Django html file, I am facing an issue with the IF statement that seems to be dysfunctional

I have a like button and I want it to display an already liked button if the user has already liked the post. Here is my HTML: {% for post in posts %} <div class="border-solid border-2 mr-10 ml-10 mt-3 px-2 pb-4"> & ...

javascriptpythonhtmldjango

Managing HTTP requests across different HTML pages in a Cordova mobile application

I have developed a Multiple Page Application (MPA) for Android and iOS which navigates to different pages when users want to view them. Everything is running smoothly so far, but I now want to add some backend sync features. The issue I am facing is that I ...

javascripthtmlajaxcordovahttprequest

Is there a way to display the true colors of a picture thumbnail when we click on it?

In my project, I attempted to create a dynamic color change effect when clicking on one of four different pictures. The images are displayed as thumbnails, and upon clicking on a thumbnail, it becomes active with the corresponding logo color, similar to t ...

javascripthtmlcssvue.js

What is the best way to ensure that the width of dropdown menu items corresponds precisely to the width of the content

I have implemented the Reactstrap drop-down menu: import React from "react"; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from "reactstrap"; export default class DropDownTest extends React.Component { cons ...

htmlcsstwitter-bootstrapbootstrap-4reactstrap

I have implemented an email validation form in Angular, however, if the validation is not properly handled, the data will still be stored. How

When I enter an email address, for example: if I enter "abc" it shows an alert saying "please enter a valid email". If I leave it blank and try to submit, it shows an alert saying "email required". But when I click register, the data is saved regardless of ...

htmlangular

When Chrome DevTools are opened, some elements of a webpage undergo a transformation in their style

I've recently started working on a static webpage using VueJS/NuxtJS and Buefy as the UI library, although I am still learning about these technologies. One issue that I have encountered is that certain elements on the page change style when I open C ...

cssvue.jssassgoogle-chrome-devtoolsmedia-queries

Refresh the webpage excluding a single element using AJAX

I'm facing a challenge with an audioplayer on a webpage that needs to keep playing without interruption while navigating. The layout of the page cannot be changed, so simply moving the audio player outside and reloading the content is not an option. ...

jqueryhtmlajaxdom