Tips for resolving the issue with "Text Animation"

Could someone please help with fixing this CSS animation? I want to align the text animation to the paragraph properly. I'm not confident if I am approaching this in the correct way, so if there is a simpler solution out there, I would appreciate learning about it. My goal is to achieve this type of animation using only CSS, if that's feasible.

Thank you!

h1.entry-title, .blog h1.entry-title
{
    font-family: 'Playfair Display', serif;
    font-size: 51px;
    line-height: 60px;
    font-weight: 400;
    color: #000;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 50px;
    text-align: left;
}

.flip {
  height:50px;
  overflow:hidden;
  display: inline-block;
  padding-left: 10px;
}

.flip > div > div {
  color:#000;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

.flip div:first-child {
  animation: show 8s linear infinite;
}

.flip div div {
  background:#fff701;
}
.flip div:first-child div {
  background:#fff701;
}
.flip div:last-child div {
  background:#fff701;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}
<div id="content" class="site-content">
                <div class="header-content content-1170 center-relative block">
                    <h1 class="entry-title">
                        You can’t wait for<div class=flip>
                        <div><div>succes,</div></div>
                        <div><div>money,</div></div>
                        <div><div>class,</div></div>
                      </div>
                        <br>
                        you have to go after it with a club.
                    </h1>
                </div>

Answer №1

To create a visually appealing layout, you can leverage the values of inline-block elements and their behavior to position your box next to text effectively:

For instance, using alternate in the animation to prevent a glitch each time it restarts.

span {
  display: inline-block;
  vertical-align: -0.275em;
  /*adjusting box from baseline */
  text-align: center;
  height: 1.2em;
  overflow: hidden;
}

span span {
  display: block;
  background: yellow;
  margin-bottom: 0.2em;
  padding:0 0.2em;
}

span span:first-of-type {
  margin-top: -4.2em;
  animation: slide 8s alternate infinite;
}
span ~ span span {
background:tomato
}
span ~ span span:first-of-type {
  animation-delay:-4s;

}

@keyframes slide {
  0%,
  20% {
    margin-top: -4.2em;
  }
  25%,
  50% {
    margin-top: -2.8em;
  }
  55%,
  70% {
    margin-top: -1.4em;
  }
  75%,
  100% {
    margin-top: 0;
  }
}

p + p {font-size: 2.5em;}
<p> Let's have <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> to share or is it only about <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> after all .</p>
<p> Let's include <span> <span>text</span> <span>phrases</span> <span>tales</span> <span>symbols</span> </span> to convey or is it merely <span> <span>text</span> <span>expressions</span> <span>stories</span> <span>CSS</span> </span> after all .</p>

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

PHP and Ajax Form Submission Directing to Backend PHP Script

While working on a portfolio, I encountered an issue with the contact form. When I click the submit button to send a message, instead of displaying the bootstrap alert message below the form, the page redirects to the PHP file. Although I receive the emai ...

Certain Android devices may experience compatibility issues with the web app

I am facing an issue with my webapp on Raspberry Pi, as it is not being recognized properly by all my Android devices. The server hosting the website is a Raspberry Pi 3 running Apache and everything is up to date. To protect privacy and security, all IP ...

Tips for positioning one set of menu buttons to the left and another set to the right

I am currently utilizing bootstrap 5 and I want to align two groups of menu buttons on the same line - one to the left and the other to the right. At the moment, my code is displaying the second group below the first group to the left. This is how it curr ...

Responsive Design and Advertising with CSS Media Queries

For my application, I am utilizing Twitter's bootstrap (responsive) css. My goal is to incorporate banner ads in the sidebar section. However, due to different media query settings, the sidebar's width will vary, resulting in the need for the ban ...

Issue with Bootstrap's pull-right class causing elements to overlap

I need help positioning a single button above a list, with the button to the right. Whenever I try using the pull-right class on the button (or its containing div), the button ends up being covered by the list. <div> <div class="pull-right"& ...

Screen JSON data by applying filters

In my current project, I am working on extracting data from a JSON file and presenting it to the user in a way that allows them to input values that match the expected data. My goal is to show different sections of the screen at different times. The initi ...

Looking to create a centered 'ul' using Bootstrap

I am looking to center the list with a specific width. body { background-color: rgb(26, 40, 114); } h1 { color: white; text-shadow: 7px 7px 10px black; } li { list-style: none; border-radius: 5px; border: 2px solid white; background-colo ...

Retain the previously selected option in a PHP combobox even when changing pages

Can someone please assist me with my PHP code? I am having trouble keeping my combobox unchanged after a page reload. It works fine until I change pages in my pagination. Can anyone help? THIS IS MY PHP. PHP ...

Arrangements of lines in website design for various screen resolutions

I am having an issue with the layout I'm working on - specifically, there is a visible outline of the div boxes at certain resolutions or when zooming in. This is what it should look like: However, this is how it appears at some resolutions or when ...

Checking for valid positive numbers and detecting invalid dates with Angular form techniques

How do I validate an input to ensure it is a positive number and a date no earlier than the current date using Angular's FormControl, FormBuilder, and FormGroup? Here is my code: HTML: <p>Enter price:</p> <input type="number" formCont ...

Choose the grandparent of an element's parent

Is there a way to select the grandparent element of a child in Javascript without having to chain the .parentElement method twice? Specifically, I am looking for a method that can substitute .parentElement.parentElement when selecting the desired element, ...

Javascript enables the magnetization of cursor movements

Can a web page be designed so that when users open it and hover their mouse over a specific area outside of an image, the mouse is attracted to the image as if by a magnet? Is this idea feasible? Any suggestions would be appreciated. ...

What are the best ways to ensure text stays center aligned and prevent position absolute elements from overlapping?

I'm currently working on a project that involves center-aligning the page title within the parent div. However, I have run into an issue with an overlapping back button when the page title is too long due to its absolute positioning. Can anyone provid ...

Are personalized URLs necessary for jump anchor links?

When utilizing 'Jump to' or 'Anchor' links to navigate to a different section of a webpage, should I include a canonical URL or use a 'no-follow' link for SEO optimization? Is it significant at all? And if so, which approach i ...

Using AngularJS, you can display repeated elements in a single textarea by utilizing

--> I want to be able to input data into a textarea using just one textarea element. --> The reason for this is so that when the data in MySQL is updated, I can type new data in the textarea while still keeping the existing data. I have tried using ...

JavaScript issue with confirm/redirect feature not functioning as expected

A demonstration of JavaScript is utilized for deleting an employee in this scenario... <script type="text/javascript"> function deleteEmployee(employee) { var confirmation = confirm('Are you sure?'); if(confirmation) { ...

Mobile browser not resizing window width in fluid layout on WordPress site

Currently, I am working on developing a basic web layout that can adapt to mobile view. I have made some progress which you can check out here. The layout successfully adjusts when the window is resized in Firefox or Chrome. However, when I tried to acce ...

Issue Encountered While Trying to Load Images on Local Host Test Server

I have encountered a strange issue that I can't seem to explain. Currently, I am developing an AngularJS website for my family that includes integration of data from different web services. One section of the site involves fetching photos from our Fl ...

Steps for eliminating the overlay on top of the padding region

My current code includes an overlay over images, but the overlay extends beyond the image itself and covers the padding area as well. If I switch the padding to margin in order to eliminate this unnecessary overlap, it causes the last image to be pushed on ...

Tips for adjusting the color of the sidebar in an HTML email template

My attempt at modifying the background color of my HTML email template has been focused on changing the sidebar's white color, rather than altering the background of the email body itself. This is the CSS code I have: @import url('https://fonts. ...