Text letters grow progressively larger

How can I create a CSS Grow effect in HTML, where each letter grows and shrinks continuously to create a loading effect? I want to achieve this with the following HTML code:

<h4 class='groweffect'>Loading please wait</h4>

To implement the grow effect, I found a helpful resource at . Here is the CSS code for the grow effect:

.groweffect {
  -webkit-transition:all 0.5s ease-out;
  -moz-transition:all 0.5s ease-out;
  -ms-transition:all 0.5s ease-out;
  -o-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}

Any advice or guidance on how to achieve this effect would be greatly appreciated. Thank you!

Answer №1

Enclose each letter within a span tag.

    <h4 class='text'>
     <span>H</span><span>e</span><span>y</span>
    </h4>

Next, initiate animations on the letters with specified delays to create a sequential effect.

h4.text span:first-child{
  animation:letterAnim 2s linear;
}
h4.text span:nth-child(2){
  animation:letterAnim 2s linear;
  animation-delay:1.5s;
}
h4.text span:nth-child(3){
  animation:letterAnim 2s linear;
  animation-delay:3s;
}
@keyframes letterAnim{
  0%{font-size:16px;}/*default*/
  50%{font-size:30px;}
  100{font-size:16px;}
}

Answer №2

To give a unique effect to each letter, consider using the following method.

<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">L</div>
<div id="fountainTextG_2" class="fountainTextG">o</div>
<div id="fountainTextG_3" class="fountainTextG">a</div>
<div id="fountainTextG_4" class="fountainTextG">d</div>
<div id="fountainTextG_5" class="fountainTextG">i</div>
<div id="fountainTextG_6" class="fountainTextG">n</div>
<div id="fountainTextG_7" class="fountainTextG">g</div>
<div id="fountainTextG_8" class="fountainTextG">.</div>
<div id="fountainTextG_9" class="fountainTextG">.</div>
<div id="fountainTextG_10" class="fountainTextG">.</div></div>

This is how you can style it:

#fountainTextG{
    width:234px;

...
}

.fountainTextG{
    color:rgb(255,0,150);
    font-family:'Helvetica';
...

@keyframes bounce_fountainTextG{
    0%{
        transform:scale(1);
        color:rgb(255,50,100);
    }

    100%{
        transform:scale(.5);
        color:rgb(25,88,200);
    }
}

View a live demo here.

Answer №3

To animate each letter, you need to put them inside individual divs. If you're searching for inspiration, check out this link

For a variety of loading effects, visit this website. You can find more options at

By clicking on the thumbnails, you can customize and edit the effects.

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

Encountering a problem with ng-repeat when working with a JSON

Having a bit of trouble displaying the keys and values from a JSON object in an HTML table using ng-repeat. The JSON object is coming from the backend, but for some reason, it's not showing up on the frontend. I know there must be a simple mistake som ...

Unable to highlight text when using the width property in CSS

I'm currently facing a challenge with some CSS code. I have a button that needs to change its content after being clicked (which it does), and then enable user-select: all. Here is the code snippet: <!DOCTYPE html> <html lang="en" ...

Is it possible to incorporate a carousel within this parallax feature?

I recently downloaded a JavaScript library called paroller.js that has allowed me to create a captivating parallax effect on my website. The effect is based on a background image (forsidebillede2.jpg) that covers the entire screen, and I even managed to i ...

modifying the position of a container within the lower bounds of a surrounding container

I'm struggling to position the blue box at the bottom of this image, and I can't figure out why. Here is my CSS: .boxes { margin-left: 4%; margin-right: -4px; height: 345px; padding: 5px; font-size: ...

What could be the reason that data-bs-placement="right" is not functioning as expected?

I am facing an issue with the popover functionality in my project. No matter what value I set for data-bs-placement attribute, it does not display correctly. Can you help me understand why this is happening? <!DOCTYPE html> <html lang="en ...

Tips for preventing the line through effect on a span element when it is checked

I am working on a project that involves a list of items labeled as li. For example: <ul class="list"> <li class="checked">Groceries <span>&#215;</span></li> <li>Medicine <span>& ...

Using Jquery Ajax to validate login information by submitting an HTML form

Working on a project involving jQuery Ajax, HTML forms, MySQL, and PHP. I have a database with registered users and I want to use a login form to retrieve user information from the database upon submission. However, I'm encountering an issue where the ...

Create angled corners enclosed by a trim

I'm looking to create an HTML shape with cutoff corners and a border around it. Currently, I can create cutoff shapes without borders using the following code: HTML: <div class="cut-off"></div> CSS: .cut-off{ position:relative; ...

Creating a new project in ASP Net Core Angular using Bootstrap 4 for the SideMenu layout instead of Bootstrap 3

I am currently working on developing a website using Angular6, where I aim to have a vertical navbar for large screens and a top navbar with dropdown functionality for mobile devices. While searching online, I came across several examples that seemed overl ...

Using Selenium to scroll down to an element until its 'style' changes

I'm in the process of scraping a review page similar to this one. While this specific page has only a few reviews, there are others with a larger volume that require extensive scrolling. Upon observation, I noticed that when the page is not complete ...

Scrape data from LinkedIn search results using HtmlAgilityPack

Looking to fetch the top search result for a LinkedIn query. Check out this fiddle: https://dotnetfiddle.net/Vtwi7g Passing this link to 'html' variable: Targeting the first result : Wondering how to pass credentials for logging into Lin ...

No departure animation employed - Polymer

I am working on a project that involves animating a paper-icon-button with spin and opacity effects when hovering over an image using the on-mouseenter and on-mouseleave events. Everything works smoothly when hovering over the image, but I am facing an is ...

The specified font is not loading despite being correctly defined

I have a font stored locally in resources/fonts/ and I'm correctly linking to it, but for some reason, it's not loading. Here is the <style> section in my html: <style> @font-face{ font-family:"franklin_gothic_condensed"; ...

Is there a way to remove the extra space on the right side of a Bootstrap website?

I'm having trouble with the white space on the right side of a website I created using Bootstrap. No matter what I try, it just won't go away. If you have any solutions, please share them with me. <!doctype html> <html lang="en" ...

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

CSS and jQuery code to create a nested dropdown menu

As a beginner in CSS and HTML, I am struggling with creating a clickable menu for devices. The menu will be nested under a hamburger icon and needs to have multiple levels of nesting. While I successfully implemented the top-level dropdown menu following a ...

Choosing jQuery selectors: lists that aren't contained within a div element

I am faced with an HTML structure that resembles the following: <div id='main'> <ul> <li>1_1</li> <li>1_2</li> <li>1_3</li> </ul> <ul> <li>2_1</li> ...

The nested navigation link disappears suddenly on Internet Explorer 9

This query closely resembles another issue: Nested menu keeps vanishing on IE 8 & 9. However, the solution provided is quite limited. Why do my nested menus disappear before I can reach them with my cursor unless I move it swiftly? This peculiar behavi ...

Stop the button from spanning the entire width of its container

Utilizing the Material UI button in my application with customizations as styled-components, I encountered an issue where setting the size="small" prop on the button caused it to only take up the width of the button text with some padding. This behavior pe ...

What's the reason for the align-self: flex-end CSS property not working as expected on a flex div element?

I am trying to align the "Click me" button to the left of the div that contains it. Here is my code: render = () => { return ( <Wrapper> <Body> <span>Title</span> <Desc ...