The CSS code for creating a typing effect is not functioning properly

I'm having some trouble with a code snippet I wrote to create a typing effect on hover within a div. Here's the code:

.about-panel:hover p {
    color: white;
    font-size: 1em;

    white-space: wrap;
    overflow: hidden;


    -webkit-animation: typing 4s steps(1000, end),
    blink-caret .5s step-end infinite alternate;
}

Unfortunately, it doesn't seem to be working as expected. The text just appears all at once after 4 seconds. Here are the animation keyframes:

@-webkit-keyframes typing {
    from {
        width: 0;
    }
}

@-webkit-keyframes blink-caret {
    50% {
        border-color: transparent;
    }
}

Can anyone help me figure out what the issue might be and how to fix it?

htmlcssweb

Answer №1

One way to achieve this effect is by adding a class to the text when hovered.

.about-panel {
  float: left;
}

.about-panel p {
  border-right: .15em solid transparent;
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
}

.about-panel:hover p {
  width: 100%;
  transition: width 0.3s;
  animation: blink-caret .5s step-end infinite;
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange
  }
}
<div class="wrapper">
  <div class="about-panel">
  Hover here
    <p>Hello Worls !!!</p>
  </div>
</div>

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

"Upon choosing a file using the HTML input file multiple element, a triggered event

After selecting multiple files using the input type="file" HTML element, I am eager to start uploading them. Can you tell me which event I should use to execute code immediately after finalizing my file selection? This is what my HTML code looks like: &l ...

javascriptjqueryhtmldom-events

Exploring the Interaction of Users with HTML Table Cell <td>

I am currently analyzing the code for a web page. Within this code, users have the ability to double-click on a cell in a table (<td> as shown below) and input a value. Is there a specific attribute or element within this HTML that indicates user in ...

javascripthtmlhtml-table

The autocomplete attribute for "current-password" in React is failing to display the form fill option

Encountering an issue with the autocomplete="current-password" attribute not displaying the current password in a form, even though it is saved in Chrome. The input field is enclosed within a form. Is anyone else experiencing problems with the autocomplete ...

htmlreactjsautocomplete

Issue with CanvasJS Carousel compatibility on Bootstrap 4 platform

I am struggling to display charts with a carousel feature using CanvasJS. Despite my efforts, I am unable to see any graphs on the page. My framework is Bootstrap 4.1.3. In my attempts to achieve this functionality, I previously experimented with Google C ...

jqueryhtmlchartsbootstrap-4canvasjs

Swipe horizontally on mobile devices with text scrolling

I stumbled upon a workaround online that effectively allows for horizontal scrolling on mobile devices. <div style="max-width: 1024px; margin: auto; "> <ul style="white-space: nowrap; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-sc ...

htmlcssmobilewebkit

PHP MySQL outputting data in a dropdown menu format

Struggling to extract data from a database and display it as a dropdown list. I am fetching the foreign key, its unique code, and its name/title to be displayed in a dropdown list for input into a new table. $sql = "SELECT quali_code, title FROM ...

phpmysqlhtml

When the window is scrolled to 50%, I would like to load some additional data

Looking to load data when the browser scrollbar reaches 50%... In jQuery, I created the following function: $(window).on('scroll', function () { alert("scrolling"); if ($(window).scrollTop() + $(window).innerHeight() > ...

javascriptjqueryhtml

Alignment issue with React JSX background position; image not centered on the right in Material UI Grid item

I've recently completed a single-page website portfolio, but I'm encountering an issue with setting the background position of the home screen to center right. You can view my site here: Here is the link to my repository: https://github.com/Bolm ...

cssreactjsmaterial-uijsx

Showcase an image stored in my sqlite3 database on my Python Flask web application

My goal is to create a web application connected to a database where users can search for specific names and display the corresponding image stored in the database. The images in the database are stored as png BLOBs. The database is structured with a tabl ...

pythonhtmlsqliteflask

Search bar that automatically adjusts based on the size of the containing div

https://i.stack.imgur.com/wtn8K.gif I'm interested in learning how to achieve a layout similar to this. Here's an example of what I've created: <div class="header-con"> <div class="search-bar-con"> <input type ...

htmlcss

Utilize Google Autofill to easily populate address fields in a form

I've come across several autofill address codes, but I'm looking to integrate a Post function that would allow me to post the obtained data to a PHP page. Is there anyone who can assist with the javascript or HTML code to achieve this? HTML Cod ...

javascriptphphtmlformsgoogle-maps

The functionality of Nativescript squared buttons is not functioning as expected

I recently developed a Nativescript app using Angular, incorporating customized buttons. However, I have encountered an issue where I am unable to achieve perfectly squared buttons with the desired appearance. Here is my CSS code: Button { font-size: ...

cssnativescriptangular2-nativescript

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Is it possible to resize a specific image in a folder by its name using PHP? ..................................................................................................................................................................... I have trie ...

phpcssimage

Is there a glitch in my CSS code or am I simply misunderstanding how to center a div?

After doing some research, I noticed that all the tutorials I came across recommended following the same steps. However, when I implemented the code below: .center{ width: 50%; margin: 0px auto; } It centered all six items but didn't align them in 3 ...

htmlcsstwitter-bootstrap

Is there a way to showcase the uploaded file contents on the current page without the need to refresh?

Is there a way to display the contents of an uploaded file on the same HTML page without opening a new tab or refreshing it? I have the following HTML and PHP codes for reading an uploaded file in a separate page, but I want to integrate it into the same H ...

javascriptphphtmlajax

After several interactions, the CSS files fail to load

I'm currently utilizing jQuery Mobile with 3 pages, and I've noticed that after navigating between the pages, the CSS is not being rendered properly. LoadCss.js $(document).on("pageinit",function(event) { $("#categoriesPage").on('pages ...

javascriptcssangularjsjquery-mobile

How can the 'selected' attribute be assigned to 'select/option' tags depending on the option value?

In my code, I have a select input with various options and values. I want to set the 'selected' attribute for the option that corresponds to a specific value X. Here is an example: // If x=3, I want the option with value=3 to be marked as 's ...

javascripthtml

Foundation 5.2.2: Creating a Dropdown Menu

Would it be possible to achieve this effect using Foundation: https://i.stack.imgur.com/UyYqK.png ? I am interested in implementing 2 COLUMNS in the TopBar Menu: foundation.zurb.com/docs/components/topbar.html I came across a MegaMenu (codepen.io/winghou ...

htmlcssnavigationzurb-foundationnavbar

What's the best way to ensure that a div remains fixed at the top of the page while also being centered?

I have a div that I've centered using margin left and right auto. However, I want this bar to be visible throughout my page, so I positioned it absolutely. But now the bar is not centered anymore, it's appearing on the left. How can I position th ...

htmlcss

Challenges encountered while working with OpenWeather API

I created a weather prediction web application using p5.js. It functions perfectly on my local server. However, I keep encountering this issue on the GitHub page: Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure ...

javascripthtmlapihttpp5.js