CSS3 keyframes consists of a sequence of five different frames

I am utilizing keyframes to smoothly slide through my list. Check out the code on jsFiddle.

html

<div id="merch" class="block">
    <h2>MERCH</h2>
    <div class="content">
      <div id="merchContainer">
        <ul class="merchItems">
          <li class="merch small item1 firstmerch">
             <div class="merchImg">
               <a href="/" target="_blank"><img src="http://images.wikia.com/recipes/images/1/15/Red_Apple.jpg"></a>
               <div class="merchZoomIcon"></div>
             </div>
             <div class="merchDetail">
               <div class="merchPriceWrapper">
                 <div class="merchName">
                   <a href="/" target="_blank">Apple</a>
                 </div>
                 <div class="merchPrice">$5.00</div>
               </div>
               <div class="merchBuy">
                 <a class="merchBuyLink button" href="/" target="_blank">BUY NOW</a>
               </div>
             </div>
           </li>
           <li class="merch small item2 secondmerch">
             <div class="merchImg">
               <a href="/" target="_blank"><img src="http://www.joemcalpine.com/wp-content/uploads/2012/04/orange2.jpg"></a>
               <div class="merchZoomIcon"></div>
             </div>
             <div class="merchDetail">
               <div class="merchPriceWrapper">
                 <div class="merchName">
                   <a href="/" target="_blank">Orange</a>
                 </div>
                 <div class="merchPrice">$45.00</div>
               </div>
               <div class="merchBuy">
                 <a class="merchBuyLink button" href="/" target="_blank">BUY NOW</a>
               </div>
             </div>
           </li>
           <li class="merch small item3 thirdmerch">
             <div class="merchImg">
               <a href="/" target="_blank"><img src="http://www.mangomaven.com/wp-content/uploads/2011/02/manilla1.jpg"></a>
               <div class="merchZoomIcon"></div>
             </div>
             <div class="merchDetail">
               <div class="merchPriceWrapper">
                 <div class="merchName">
                   <a href="/" target="_blank">Mango</a>
                 </div>
                 <div class="merchPrice">$1.29</div>
               </div>
               <div class="merchBuy">
                 <a class="merchBuyLink button" href="/" target="_blank">$1.29</a>
               </div>
             </div>
           </li>
         </ul>
       </div>
   </div>
</div>

css

/*MERCH*/
#merch {
    height: 325px;
    width: 304px;
    margin: 0 auto;
    overflow: visible;
    position: relative;
}
#merch img {
    display: block;
    height: 240px;
    width: 287px;
}
#merch .content {
    height: 340px;
    overflow: hidden;
}
#merch ul.merchItems {
    position: relative;
}
#merch li {
    width: 304px;
    height: 340px;
    position: absolute;
    right: -345px;
    list-style: none;
}
#merch li.firstmerch {
    -moz-animation: merchone 5s linear infinite;
    -webkit-animation: merchone 5s linear infinite;
}
#merch li.secondmerch {
    -moz-animation: merchtwo 5s linear infinite;
    -webkit-animation: merchtwo 5s linear infinite;
}
#merch li.thirdmerch {
    -moz-animation: merchthree 5s linear infinite;
    -webkit-animation: merchthree 5s linear infinite;
}
#merch:hover li {
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
@-moz-keyframes merchone {
    0%  { right:0px; }
    4%  { right:0px; } 
    16% { right:0px; opacity:1; z-index:0; } 
    20% { right:345px; opacity:0; z-index:0; } 
    21% { right:-345px; opacity:0; z-index:-1; }
    92% { right:-345px; opacity:0; z-index:0; }
    96% { right:-345px; opacity:0; }
    100%{ right:0px; opacity:1; }
}
@-moz-keyframes merchtwo {
    0%  { right:-325px; opacity:0; }
    16% { right:-325px; opacity:0; }
    20% { right:0px; opacity:1; }
    24% { right:0px; opacity:1; } 
    36% { right:0px; opacity:1; z-index:0; } 
    40% { right:345px; opacity:0; z-index:0; }
    41% { right:-345px; opacity:0; z-index:-1; } 
    100%{ right:-345px; opacity:0; z-index:-1; }
}
@-moz-keyframes merchthree {
    0%  { right:-345px; opacity:0; }
    36% { right:-345px; opacity:0; }
    40% { right:0px; opacity:1; }
    44% { right:0px; opacity:1; } 
    56% { right:0px; opacity:1; } 
    60% { right:345px; opacity:0; z-index:0; }
    61% { right:-345px; opacity:0; z-index:-1; } 
    100%{ right:-345px; opacity:0; z-index:-1; }
}
@-webkit-keyframes merchone {
    0%  { right:0px; }
    4%  { right:0px; } 
    16% { right:0px; opacity:1; z-index:0; } 
    20% { right:345px; opacity:0; z-index:0; } 
    21% { right:-345px; opacity:0; z-index:-1; }
    92% { right:-345px; opacity:0; z-index:0; }
    96% { right:-345px; opacity:0; }
    100%{ right:0px; opacity:1; }
}
@-webkit-keyframes merchtwo {
    0%  { right:-325px; opacity:0; }
    16% { right:-325px; opacity:0; }
    20% { right:0px; opacity:1; }
    24% { right:0px; opacity:1; } 
    36% { right:0px; opacity:1; z-index:0; } 
    40% { right:345px; opacity:0; z-index:0; }
    41% { right:-345px; opacity:0; z-index:-1; } 
    100%{ right:-345px; opacity:0; z-index:-1; }
}
@-webkit-keyframes merchthree {
    0%  { right:-345px; opacity:0; }
    36% { right:-345px; opacity:0; }
    40% { right:0px; opacity:1; }
    44% { right:0px; opacity:1; } 
    56% { right:0px; opacity:1; } 
    60% { right:345px; opacity:0; z-index:0; }
    61% { right:-345px; opacity:0; z-index:-1; } 
    100%{ right:-345px; opacity:0; z-index:-1; }
}

It seems that even though there are only 3 elements, it counts 5 li items and loops through them.

htmlcsscss-animations

Answer №1

Your challenge awaits (with animation durations set to 5 seconds):

@-webkit-keyframes merchone {
    ...
    16% { right:0px; opacity:1; z-index:0; }     /* 0.8 sec */
    20% { right:345px; opacity:0; z-index:0; }   /* 1.0 sec */
    ...
}
@-webkit-keyframes merchtwo {
    ...
}
@-webkit-keyframes merchthree {
    ...
    56% { right:0px; opacity:1; }                /* 2.8 sec */
    60% { right:345px; opacity:0; z-index:0; }   /* 3.0 sec */
    ...
}

The initial animation displays the first image over a time span of 0.8 to 1.0 seconds, while the third animation fades out the image between 2.8 and 3.0 seconds, resulting in a gap of 3.6 to 4.0 seconds before the next animation begins.

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

How can HTML output be automatically indented?

Seeking a way to automatically indent the HTML generated by my PHP script. I currently use HTML Purifier for validating internal textbox inputs, but I have reservations about using HTML Tidy due to its lack of active development and numerous reported bugs ...

phphtmlindentation

Struggling to input information from a web form into a MySQL database using PHP

I'm currently facing an issue with my form not being able to submit data to the MySQL database. Strangely, I'm not receiving any error messages that could help me identify the root of the problem. I experimented by changing the action method to G ...

phphtmlmysqlwamp

Creating a placeholder for a 'select' box that dynamically populates data from a MySQL database

I need help adding a placeholder to my dropdown menu populated with results from a MySQL database. Can anyone advise me on how this can be accomplished? <div class="select_drp"> <?php $query = mysql_query("SELECT * FROM training_lis ...

phphtml

Adding a gradient to enhance an SVG chart

Hey there! I'm currently experimenting with Plotly to create some awesome charts, and I've been trying to figure out how to give my area-charts a gradient instead of the usual fill with opacity. This is how I typically build my graph: Plotly.ne ...

javascripthtmlcsssvggradient

Trouble with the function to dynamically add and delete table rows

Currently utilizing Wordpress with WPMVC for my projects. In the process of dynamically adding table rows to a form in order to insert a new record into the table. Snippet of the code: views/admin/edit.php <h2>Edit Geozone</h2> <?php ec ...

javascriptphpjqueryhtmltwitter-bootstrap

After altering the display properties of the divs within a parent div using JavaScript, the background of the parent div no longer fills the entire space as expected

I have successfully developed a unique landing page layout consisting of 14 distinct groups. Within the third group of this layout, there are three columns labeled as divs. Each column contains an image, heading (h3), and accompanying text. The display of ...

javascripthtmlcssbackground

Tips for creating a clickable popover within a window that remains open but can be closed with an outside click

Is there a way to ensure that my popover window remains clickable inside its own area without closing, but automatically closes when clicked outside of the window? This is the code I am currently using, which is triggered by a button click: if (response. ...

javascripthtmlajax

When a checkbox is checked, hide table rows with a specific class while maintaining the background color on odd rows

When utilizing bootstrap, I want to ensure that the background color remains on the odd rows, even when hiding a specific row. Desired Outcome: The grey background should always be present on the 1st and 3rd rows, regardless of whether the input is checke ...

jqueryhtmlcsstwitter-bootstrap

Dynamically inserting a new row into a table with the power of jQuery

Currently working on dynamically adding rows to a table through jQuery in my project that follows MVC design pattern. I have set up a loop for the added rows, but need help with the script. Here is my code snippet for the loop : <?php $viewTableR ...

javascriptphpjqueryhtmlhtml-table

Utilizing D3.js to filter nodes and links by making multiple selections from a checkbox

I am interested in enhancing my current forced directed graph by adding more flexibility. You can access the Jsfiddle here. Currently, there are radio buttons that control the opacity of nodes and links. There are 4 types of nodes: Agent, Customer, Pho ...

javascriptjqueryhtmld3.js

What is the best method to bring in an HTML list into R programming?

I am trying to import a comprehensive list of banks in Cambodia, including their homepage, address, and other details into R. Although I have attempted the code below, it is not working: url <- "https://www.abc.org.kh/member-list/" html <- ...

htmlrimport

The way Chrome interprets the CSS class height and width attributes for input tags can vary

I was working on developing and testing a section of HTML div when I encountered an issue. After placing that section in another HTML page, the input tag CSS appeared to be rendered differently. This led me to enter debug mode. Interestingly, the CSS box ...

htmlcssmargin

Troubleshooting issue with alignment in Material UI using Typescript

<Grid item xs={12} align="center"> is causing an issue for me No overload matches this call. Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<Breakpoint, boolean | GridSize>> & { ...

cssreactjstypescriptmaterial-ui

Issue with ng-bind not functioning correctly within a custom directive on a label

A custom directive was implemented to incorporate a hint-icon with a description for labels. Here is the code snippet for the directive: propertyWindowModule.directive('hintIcon', { restrict: 'A', controller: HintI ...

angularjshtmlangularjs-directive

What are some methods to achieve consistent alignment of input fields across different mobile devices using CSS?

I have been working on a login page that looks good on desktop and laptop devices. However, I am facing an issue with its display on mobile devices. The design appears differently on various mobile devices - for instance, it looks acceptable on an iPhone 1 ...

htmlcsscakephp-2.0

Why is CSS styled by jQuery not working on hidden elements?

My challenge involves applying CSS to hidden elements and revealing them when a user interacts with a radio button. The issue arises when using CSS through jQuery to dynamically set the width of these elements. Because the elements are initially set to dis ...

jquerycss

Is it possible to loop through a subset of a collection using *ngFor?

Is it possible to iterate through a specific range of elements in a collection using *ngFor? For instance, I have a group of checkboxes with their form control name and label specified as follows: [{id: 'c1', label: 'C1'}, ...] Assum ...

javascripthtmlangulartypescriptangular-material

Setting a conditional class based on the iteration value of a loop within a v-for statement

When generating table rows using the v-for"x in y" directive, I also want to apply certain classes conditionally based on a value within the loop. For example: <tr v-for="file in fileList" :class="{ 'bg-green': file.include }"> <td&g ...

htmlvue.js

Is there a workaround for retrieving a value when using .css('top') in IE and Safari, which defaults to 'auto' if no explicit top value is set?

My [element] is positioned absolutely with a left property set to -9999px in the CSS. The top property has not been set intentionally to keep the element in the DOM but out of the document flow. Upon calling [element].css('top') in jQuery, Firef ...

javascriptjquerycss

Is the Img tag causing alignment problems with centering content?

I recently launched a simple static portfolio site on GitHub Pages for easy maintenance. The main navigation consists of a 3-line title at the top of every page, providing seamless movement throughout the site. However, I have encountered a small (approxim ...

htmlcssimagegithub-pages