Guide to continuously play the animation, Version 2

I have been struggling with an animation that I need to loop indefinitely. The problem arises when trying to use 

animation-iteration-count: infinite
. It seems like no matter where I place it in the code, whether within the keyframes or normal CSS rules, it just doesn't work properly. Placing it inside the animation leads to overlapping, creating a messy outcome.

ul {
  background-color: cadetblue;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  display: inline;
  margin-right: 10px;
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: cadetblue;
  text-decoration: none;
  color: black;
}

li a {
  padding: 14px 16px;
}

a:hover {
  background-color: rgb(35, 185, 165);
}

@import url('https://fonts.googleapis.com/css?family=Roboto:700');
.rotatingText {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 18px;
  text-align: center;
  animation-iteration-count: infinite;
}

.rotatingText-adjective {
  font-family: "Open Sans", sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  left: 0;
  margin-bottom: 0;
  margin-top: 50px;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(1) {
  animation-name: rotate;
  animation-duration: 1.5s;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(2) {
  animation-name: rotate;
  animation-duration: 1.5s;
  animation-delay: 1.75s;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(3) {
  animation-name: rotate-last;
  animation-duration: 1.5s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    animation-iteration-count: infinite;
  }
  20%,
  80% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -25px, 0);
    animation-iteration-count: infinite;
  }
}

@keyframes rotate-last {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    animation-iteration-count: infinite;
  }
  50%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
}
<div>
  <ul>
    <li><a style='background-color: #1aad0667;' href='index.html'>Home</a></li>
    <li><a href='about.html'>About</a></li>
    <li><a href='pricing.html'>Pricing</a></li>
    <li><a href='contact.html'>Contact</a></li>
  </ul>
</div>
<h1 style='text-align: center; font-size: 50px;'> Lorem Ipsum </h1>

<p class="rotatingText">
  The best

  <span class="rotatingText-adjective"> Cloud Gaming </span>
  <span class="rotatingText-adjective"> Cloud Computing </span>
  <span class="rotatingText-adjective"> Server Hosting </span>
</p>

Please include detailed examples! :)

htmlcssloopsanimation

Answer №1

Adjust the keyframe values to customize your animations and incorporate animation-delay and duration based on the number of elements.

@keyframes rotate {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
        animation-iteration-count: infinite;
    }
  
    7%, 25% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        animation-iteration-count: infinite;
    }
  
    33% {
        opacity: 0;
        transform: translate3d(0, -25px, 0);
        animation-iteration-count: infinite;
    }
}


ul {
                background-color: cadetblue; 
                list-style-type: none; 
                margin: 0; 
                padding: 0; 
                overflow: hidden;
            }
            li {
                display: inline; 
                margin-right: 10px; 
                float: left;
            }
            a {
                display: block; 
                padding: 8px; 
                background-color: cadetblue; 
                text-decoration: none; 
                color: black;
            }
            li a {
                padding: 14px 16px;
            }
            a:hover {
                background-color: rgb(35, 185, 165);
            }

            @import url('https://fonts.googleapis.com/css?family=Roboto:700');

.rotatingText {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 18px;
  text-align: center;
  animation-iteration-count: infinite;
}

.rotatingText-adjective {
  font-family: "Open Sans", sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  left: 0;
  margin-bottom: 0;
  margin-top: 50px;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(1) {
  animation-name: rotate;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(2) {
  animation-name: rotate;
  animation-duration: 15s;
  animation-delay: 5s;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(3) {
  animation-name: rotate;
  animation-duration: 15s;
  animation-delay: 10s;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    animation-iteration-count: infinite;
  }
  
  7%, 25% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
  
  33% {
    opacity: 0;
    transform: translate3d(0, -25px, 0);
    animation-iteration-count: infinite;
  }
}

@keyframes rotate-last {
  0% {
    opacity: 1;
    transform: translate3d(0, 50px, 0);
    animation-iteration-count: infinite;
  }
  
    50%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
}
<div>
            <ul>
                <li><a style='background-color: #1aad0667;' href='index.html'>Home</a></li>
                <li><a href='about.html'>About</a></li>
                <li><a href='pricing.html'>Pricing</a></li>
                <li><a href='contact.html'>Contact</a></li>
            </ul>
        </div>
        <h1 style='text-align: center; font-size: 50px;'> Lorem Ispum </h1>

        <p class="rotatingText">
          The best
        
          <span class="rotatingText-adjective"> Cloud Gaming </span>

                    <span class="rotatingText-adjective"> Cloud Computing </span>
          <span class="rotatingText-adjective"> Server Hosting </span>
        </p>

Answer №2

If you want to streamline your code, consider utilizing the shorthand animation property. To create an infinite animation effect, simply add the keyword infinite when defining the animation for your element. Here is a sample implementation:

@keyframes rotate-anim {
    from {    
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.my-animation {
    animation: rotate-anim 0.5s infinite;
}
<p class="my-animation">Cloud Gaming</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

Tips for positioning elements within an ng-repeat list using absolute positioning?

Here is the HTML code: <div class = "container"> <form ng-submit = "createSticky()"> <input ng-model="formData.data" type="textarea" name="sticky_content" placeholder="add sticky text" required="true"/> <input ng-model= ...

htmlcssangularjs

How can I retrieve and showcase the size of each file, including images, CSS, and JS, present on a website?

Currently, my goal is to create a dashboard capable of retrieving the file size for all resources (images, javascript, css, etc.) loaded on a webpage. I aim to then further filter these resources by file type and file size in order to identify which ones c ...

javascripthtmlcss

Tips for adjusting the position of overflowing text on a website using CSS in real-time

I'm currently working on an Angular application and I'd like to customize the styling so that any text exceeding 128 characters is not displayed. Ideally, if the text exceeds 128 characters, it should move to the left; otherwise, it should remain ...

cssangulartypescript

Discovering the identification of a comment in JavaScript

Here is the code snippet I am working with: <a onclick="lel($(this),'212345555')" class="button"> <a onclick="lel($(this),'241214370')" class="button"> <a onclick="lel($(this),'248916550')" class="button"> & ...

javascriptjqueryhtmlcss

The Pin property in GSAP is behaving unexpectedly when used in NextJS

I recently tried to learn gsap and wanted to create a smooth animation where I could scroll down a page and have a long word scroll horizontally and get pinned while scrolling using the scrollTrigger plugin of gsap. I followed a tutorial but ran into an is ...

htmlnext.jsgsapscrolltrigger

Is it possible to have more than one button for each item on my Shopping List App?

I am developing a shopping list app that allows users to add items to a list. Each item added triggers the display of a button next to it, enabling users to remove the item from the list when needed. However, a problem arises as more items are added – i ...

javascriptjqueryhtmlcss

The meter.value update feature is functioning properly, however, it does not refresh the displayed "hover" value

When using JavaScript to update a meter's value, I encountered an issue: var LFRMSMeter = document.getElementById("LFRMSMeter"); LFRMSMeter.value = parseFloat(j[0]); Although the updating of the value works fine, hovering over the meter displays the ...

javascripthtml

Discover the Ultimate Guide on Altering the Course of Mega Menu!

I am working on a mega menu that is set to display in the usual direction. However, for the last two items, I would like them to appear from the button upwards. I'm not quite sure how to explain it. What I envision is something similar to this: ...

htmlcss

Having trouble with the :first-of-type Pseudo Class in CSS?

I have been attempting to style the first link in an li element with a specific font color. When the li element is clicked, it gains the "open" class. I've tried using both li a:first-of-type and li a:first-child pseudo-classes to achieve this, but ...

htmlcss

Using justify-content-between in a div container with only two items will not produce the desired effect

I'm having trouble aligning two elements on opposite ends of a div container using Bootstrap's justify-content-between class. The h4 element is not on the left and the button on the right as expected. I am using Bootstrap 5.2.3. Can anyone help m ...

htmlcsstwitter-bootstrapbootstrap-5

Introduce new material at the start of each line, akin to what ::before accomplishes for the initial line

I am currently working on customizing the appearance of my <code>/<pre> tags while ensuring that users can still easily highlight and copy the code. The method I had in mind (shown below) only applies to the first line and doesn't repeat ...

javascripthtmlcss

Using the concept of a while loop in PHP, you can easily retrieve the values of Radio Buttons on one page and

Is there a way to retrieve and store radio button values in a MySQL database using PHP looping concepts? $result = mysql_query($query) or die(mysql_error()); while ($row = mysql_fetch_row($result)) { ?> ...

phpmysqlhtml

JavaScript for Altering Viewport/Screen Width

Lately, I've been experimenting with creating a responsive button for our new website. The goal is to adjust the body width to 460px, simulating how our site would appear on mobile devices. While researching, I came across a technique that utilizes if ...

javascripthtmlcssviewport

Can someone explain how to use JavaScript to make table data fill the entire row in a table?

After clicking the button, the layout of the table changes. I want to keep the original table layout even after the JavaScript function runs. I am still learning about JavaScript. function toggle(button) { if(document.getElementById("1").value=="Show ...

javascripthtmlcss

Troubleshooting a Windows Phone HTML5 app encountering an Ajax error

Currently, I am working on developing a Windows Phone application specifically focusing on creating a "Windows Phone HTML 5 app". However, I have encountered an issue while using ajax with Jquery (version 1.9.1). The snippet of my code is as follows: ...

jqueryajaxhtmlwindows-phone-8

The function is not being called as expected when using `onclick` or `eventListener('click')`

I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user cl ...

javascripthtmlcss

Reset input value when adding or removing inputs dynamically

Currently, I have an input element that has the capability to clear its value when a button is clicked. Additionally, this input can dynamically add or remove input elements. However, I am facing an issue where after adding an input element, the clear butt ...

javascriptjqueryhtmlcss

When `focus` is bound to a jQuery event handler, the behavior of the select element becomes erratic on

What causes the odd behavior where users need to click twice on a select-option for it to drop down/up after binding an eventhandler to the focus event using jQuery? $('input, select, textarea').focus(function() { $(this).addClass('input_ ...

javascriptjqueryhtmlinternet-explorer

Place the text (menu) adjacent to the navigation bar

I am currently using bootsrap 4 alpha 6 in combination with midnight.js to alter the color of my navigation menu toggler. I am trying to incorporate a text element (MENU) alongside it, similar to the example shown in the Capture image. For the text toggler ...

javascripttwitter-bootstrapcssbootstrap-4

Expanding divs automatically depending on the content they contain

Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this: ----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- The information in each box will always ...

jquerycsshtml