Steps to create a horizontal animation using CSS3

I have 6 different CSS3 animations that I want to split between going right and left. Can these animations be applied separately or do they all have to be the same direction? Is it also possible to adjust the speed of each animation individually?

Here is my code snippet:

<html>
  <style>

    #A,#B,#C,#D,#E,#F,#G{
    position:absolute;
    left:-20%; /* Sets initial position off-screen to the left -- adjust according to image width */
    animation:mymove 8s infinite;/* Total animation time for each image is set to 8 seconds, loops forever */
    animation-direction:normal;
    /* For Firefox */
    -moz-animation:mymove 8s infinite;
    -moz-animation-direction:normal;
    /* For Safari, Chrome, and Webkit Opera */
    -webkit-animation:mymove 8s infinite;
    -webkit-animation-direction:normal;
    /* For Presto Opera */
    -o-animation:mymove 8s infinite;
    -o-animation-direction:normal;
    }
    
    /* Starts each image's animation with a 2-second delay after the previous one */
    #A{
    animation-delay:0s;
    -webkit-animation-delay: 0s;
    }
    
    #B{
    animation-delay:2s;
    -webkit-animation-delay: 2s;
    }
    
    #C{
    animation-delay:4s;
    -webkit-animation-delay: 4s;
    }
    
    #D{
    animation-delay:6s;
    -webkit-animation-delay: 6s;
    }
     
    #E{
    animation-delay:4s;
    -webkit-animation-delay: 8s;
    }
    
    #F{
    animation-delay:2s;
    -webkit-animation-delay: 10s;
    }
    
    #G{
    animation-delay:0s;
    -webkit-animation-delay: 12s;
    }
    /* Animation start and stop points */
    @keyframes mymove
    {
    from {left:-5%;}/*off-screen left (adjust for image width) */
    to {left:100%;}/*off-screen right*/
    }
    
    @-moz-keyframes mymove /* For Firefox */
    {
    from {left:-5%;}
    to {left:100%;}
    }
    
    @-webkit-keyframes mymove /* For Safari, Chrome, and Webkit Opera */
    {
    from {left:-5%;}
    to {left:100%;}
    }
    
    @-o-keyframes mymove /* For Presto Opera */
    {
    from {left:-5%;}
    to {left:100%;}
    }

    </style>
  <div>
   <img src="A.gif" id="A" alt="A"/>
   <br>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <img src="A.gif" id="B" alt="A"/>
   <br>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <img src="A.gif" id="C" alt="A"/>
   <br>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <img src="A.gif" id="D" alt="A"/>
   <br>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <img src="A.gif" id="E" alt="A"/>
   <br>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <img src="A.gif" id="F" alt="A"/>
   <br>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <div><br></div>
   <img src="A.gif" id="G" alt="A"/>
  </div>
</html>

Answer №1

Do you think something like this would work for you?

Check out this CodePen example

 To adjust the speed, simply modify the value in 
-moz-animation:mymove 8s infinite;

You can change the number '8' to any other value you prefer, which will affect how quickly or slowly the animation runs.

As a tip for future reference, consider moving all of your CSS styles into a separate external file for better organization.

Answer №2

Check out this example:

https://jsfiddle.net/robi_osahan/9pLrzqkj/

Styling with CSS:

.item-container {
    position: relative;
}

.left-item,
.right-item {
    position: absolute;
}

.left-item {
    left: -20%;
    animation: left-to-right 8s infinite;
}

.right-item {
    right: -20%;
    animation: right-to-left 8s infinite;
}

@keyframes left-to-right {
    from {
        left: -20%;
    }
    to {
        left: 120%;
    }
}
@keyframes right-to-left {
    from {
        right: -20%;
    }
    to {
        right: 120%;
    }
}

HTML Markup:

<div class="item-container">
    <img src="https://dummyimage.com/200x150/000/fff&text=A" id="A" alt="A" class="left-item" />
    <img src="https://dummyimage.com/200x150/000/fff&text=B" id="B" alt="B" class="right-item" />
</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

Is there an h1 heading on this page?

Trying to enhance the accessibility of a website by properly setting up the headers. Running into issues with ensuring they are in the correct order. If there is code that could be applied across all pages to set h1 if it doesn't exist (promoting h2, ...

The coloring of my div elements is not displaying as intended

After reviewing the provided html and css, I am puzzled as to why the parent container is being colored green while the child items remain uncolored. It seems like all div elements are being affected by the green color. What I actually want is for the pa ...

What is the best way to align three images horizontally using bootstrap?

While working on my JavaScript class and creating one-page web apps, I had the idea to create a central hub to store and link them all together. Similar to Android or iOS layouts, I designed a page with icons that serve as links to each app. I managed to ...

width of the cells within the grid table

What is the best way to ensure the width alignment of cells in both the header and main section? I have highlighted the correct option in the image with green checkmarks. Check out the image here. Here is my example and solution: View the code on CodePen. ...

A guide to styling a Bootstrap 5 navigation bar

My goal is to have my Bootstrap 5 navigation menu wrap until reaching an xs-sized screen and then display the small screen pills. Currently, it does not wrap properly and when it reaches xs size, the menu disappears without showing the pills. Here's m ...

Stencil - React Integration Does Not Support Global CSS Styling

As per the guidance provided in the Stencil docshere, I have established some global CSS variables within src/global/variables.css. This file is currently the sole CSS resource in this particular directory. Upon attempting to incorporate my components int ...

What is the process for deleting an animation using JavaScript, and how can the background color be altered?

Two issues are currently troubling me. First off, I am facing a challenge with an animation feature that I need to modify within the "popup" class for a gallery section on a website. Currently, when users load the page, a square image and background start ...

The function of slidetoggle is malfunctioning when clicked

I currently have two dynamic containers with one displaying grouped boxes, quantities, and totals, while the other shows detailed information. Both container values are added dynamically at runtime. By default, the grouping container is displayed on the p ...

Disable the dragging of a draggable div when another div is dropped inside

In my view, I have displayed reservations and tables as div elements. The tables are draggable and droppable, while the reservations are only draggable. My goal is to be able to drag a table to a desired position and then place a reservation on it. Once th ...

Display secret content upon hovering with a stylish animation

My current structure is as follows: HTML: <ul> <li> <span>asd</span> adsafsadlvjnsd </li> </ul> CSS: span { width: 0; } li:hover span { width: 60px; } In this setup, the content inside the span tag is h ...

jQuery is malfunctioning following an AJAX request

Can anyone help me fix an issue with my jQuery code? I have a hidden div that should be shown when the mouse hovers over a sibling element. However, it seems like after my AJAX function is executed, the jQuery stops working. <div class="parent"> ...

What is the best way to clear an arrayList when an error occurs in the ajax response?

Within my code, I have initialized an empty arrayList as var selection11Data = [];. Data is retrieved from an AJAX call as shown below: var selectionId=trData.selectionId; console.log("here"); $.ajax({ url : A_PAGE_ ...

Unexpected Results from Div Positioning

Here is the PHP code snippet I am working on: <?php include 'header-adminpanel.php'; ?> <div class="container"> <div class="body-content"> <div class="side-left"><?php include 'adminproduct_sidebar.ph ...

An error is thrown when using less.js

Every time I attempt to add less.js, I encounter an XmlHttpRequest Exception 101. Including the .less file is done using this method: <link rel="stylesheet/less" type="text/css" href="anything.less" /> This issue only arises when I upload the th ...

How can one address the issue of undefined data within table cells?

I have encountered an issue while reading and displaying an XML file on a webpage using a JavaScript script. The problem arises when the page loads, and the information inside the cells of the table shows as "UNDEFINED". The intended display should include ...

How can I use querySelector in JavaScript to target all div elements that have the same class?

I'm having an issue with the document.querySelector in my JavaScript code. It currently only selects the first div that contains the class "test", but I need it to select all such divs. Is there a way to achieve this using my existing JavaScript? ...

After the video finishes playing, a black screen is displayed on the HTML 5 video

I'm facing an issue with a video loaded in the <video> tag. The video is set to play only once and doesn't loop. However, after the video finishes playing, it just displays a black screen. I've attempted to use the poster attribute, ...

Adjust the language code in a URL using JavaScript or Node.js

Within my common header file, there is a navbar that includes a multilanguage dropdown menu. The issue I am facing is that when I select a language from the dropdown, the page translates correctly. However, when I navigate to other pages, the selected lang ...

Retrieving the chosen date from a calendar using a jQuery function

Hey there, I need help with showing tasks created on a specific date by selecting that date from a full month calendar. https://i.sstatic.net/hbLtp.jpg There are multiple tasks created on the selected date, and I want to trigger a jQuery event to fetch d ...

The submit button remains unresponsive, yet upon removing its JavaScript code, it functions smoothly

This is the content of my index.html file. It contains JavaScript code. However, there seems to be a problem with the JavaScript validation as the Submit button does not perform any action when clicked. Surprisingly, when I remove the JavaScript code, the ...