CSS Animation glitch with images

I am currently facing an issue with a slide that transitions between four pictures. The slide is set at a specific pace, but I am encountering a problem with the transition from the last slide back to the first one. I have attempted various solutions such as adding another nth and adjusting the timing on the last nth, but nothing seems to be resolving the delay I am experiencing. My intention is for the entire slide to transition smoothly within a certain time frame, including the seamless return of the last slide to the first without any noticeable black delay. Below is the code snippet in question:

    .picTransition .item {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: picTransition 56s linear infinite;
  -moz-animation: picTransition 56s linear infinite;
  -ms-animation: picTransition 56s linear infinite;
  animation: picTransition 56s linear infinite;
}
.picTransition .item:nth-child(2) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.picTransition .item:nth-child(3) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
.picTransition .item:nth-child(4) {
  -webkit-animation-delay: 36s;
  -moz-animation-delay: 36s;
  -ms-animation-delay: 36s;
  animation-delay: 36s;
}

@-webkit-keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@-moz-keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@-ms-keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}

I am seeking advice on what could possibly be going wrong here.

Answer №1

If you have 4 images and set the animation-delay to be 12s for each one, the total cycle time would be 4 * 12 = 48s.

However, if you set the animation property to

picTransition 56s linear infinite;
, the cycle time will actually be 56s.

This results in an 8 second gap at the end of the animation.

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 anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...

Issue with accessing $index.$parent in function parameter within ng-repeat in AngularJS

Can anyone with more experience please explain to me why this particular code compiles successfully: <li class="btn dropdown top-stack breadcrumb-btn" ng-repeat="nodeName in selectedNodeNames"> <a class="dropdown-toggle btn-anchor"> ...

Populate JQuery fields dynamically based on changing name elements

I am working on a section that displays products dynamically fetched from a database using an ajax call. The results vary, some are single-row while others have multiple rows. Initially, I have a placeholder row of HTML on the main page for data entry whic ...

Visual Studio Code version 1.42 is now automatically converting <br> tags to <br /> when formatting code

This issue just started occurring. I'm not exactly sure what triggered it, but it could be related to my attempt to activate the Preitter extension. As a newcomer to Visual Studio Code, I am currently working on HTML5 documents. Strangely, whenever I ...

Scrolling container embedded within a parent with absolute positioning

I have encountered a tricky situation with an absolute positioned div and its nested div having overflowing content. My goal is to enable vertical scrolling for the child div, however, my attempts so far have been unsuccessful. The challenge here is that I ...

Acquiring the underlying code of websites within the local network

In the tool I am creating, it takes a URL as a parameter and retrieves the source code from that URL for analysis. The tool will be hosted on our domain, with the capability of analyzing web pages of sites within our internal network domain. Here is the Jq ...

Sending form data to PHP script following Javascript verification

After implementing basic validation for a contact form, I encountered an issue where the form would not submit to the PHP file responsible for sending emails. Despite setting the button type as "submit" and defining the form action as "contactform.php", th ...

Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does n ...

The binding in Knockoutjs is working properly, but for some reason the href attribute in the anchor tag is not redirecting to

Here is the HTML code snippet I am working with: <ul class="nav nav-tabs ilia-cat-nav" data-toggle="dropdown" data-bind="foreach : Items" style="margin-top:-30px"> <li role="presentation" data-bind="attr : {'data-id' : ID , 'da ...

"Despite using 'vertical-align: middle' on table cells, the alignment to the middle is not achieved when using AlphaImageLoader in IE6

I am currently working on aligning text within table cells that have a PNG Transparent background. To achieve this in IE6, I am using the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() method. However, I am facing an issue where the text is no ...

Inject $scope into ng-click to access its properties and methods efficiently

While I know this question has been asked before, my situation is a bit unique. <div ng-repeat="hello in hello track by $index"> <div ng-click="data($index)"> {{data}} </div> </div> $scope.data = function($index) { $scope.sweet ...

Is it possible to modify an HTML element when hovering over it in an ASP.Net page?

Is there a way to use jQuery to show the child span text - SomeClassChild3 string when hovering over the parent div - SomeClassParent in an aspx page? Here is the JavaScript section of the code: function ShowDiv(Somedata){ for(var v in Somedata){ va ...

How can I make the scrollbar invisible in the sticky header of a Material UI Table?

In my React project, I have implemented a Material-UI Table with a fixed header. The issue I am facing is that the scrollbar in the table header overlaps it and I want to hide it while still displaying it in the body of the table. I have attempted to modi ...

CSS3 flip effect on hover and click causing issues

I have successfully implemented a card flip effect using CSS3. The card is flipped using jQuery and CSS CSS .flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transfor ...

Enhancing user interfaces with jQuery by updating DOM elements

Can anyone help me figure out how to update a webpage so it functions as a report that multiple people can contribute to? I'm using forms to collect data and want it to instantly display under the correct category headings. Currently, I'm using j ...

Changing ch to Px in CSS

Important Notes: I have exhaustively explored all the questions and answers related to this particular topic. The question I have is very straightforward: How many pixels are equivalent to 1 character? Here's a sample of my code - code Related Sear ...

Looking for a custom header logo that seamlessly blends with your image slider?

I'm just starting to learn about HTML and I'm trying to create a header with a logo overlapping on an image slider. I followed the method mentioned in this post: How would you make two <div>s overlap? Unfortunately, I'm still having t ...

Error Encountered: POST method not supported in ajax request using djangoIs this a

I am currently encountering an issue while trying to pass form data values through ajax. I keep getting a method not allowed error when attempting to add a comment on a blog post. The form below is located inside the blog_detail page: <form id="co ...

Submitting a Django POST request with an empty form in an HTML form

When I try to submit a simple HTML form, both request.body and request.POST are empty for some unknown reason. The HTML code for the form is as follows: <div id="signup"> <h1>Sign Up for Free</h1> <form action="/accounts ...

Variability in Focus Behavior while Opening a URL in a New Tab with window.open()

Here is a code snippet I have been using to open a URL in a new tab: window.open(urlToOpen, '_blank', 'noopener noreferrer'); The issue I am experiencing is that when this code is executed for the first time, it opens the URL in a new ...