Ways to resolve flickering caused by css keyframe animation

I'm currently working on creating a staggered opacity effect for three boxes using an infinite keyframe animation and the animation-delay property.

However, I've encountered an unexpected issue where the third box seems to fade away and then reappear faintly ("flicker") before the animation loop starts again. This problem is consistent across different browsers.

I'm considering using pseudo-elements to see if that can resolve the issue. Are there any known solutions to this keyframe bug?

HTML

<div class="container">
   <div class="child">  
   <div></div> 
    </div>
</div>

SCSS

.container {
     position: fixed;
     left: 150px;
     top: 50px;

.child {
     position: absolute;
     animation:mymove 1s infinite;

     &::before{
         display: block;
         position: absolute;
         width: 25px;
         height: 25px;
         background-color: red;
         content: "";
         right: 40px;
         animation: inherit;
         animation-delay: .15s;
    }

    div {
        width: 25px;
        height: 25px;
        background-color: red;
        animation: inherit;
        animation-delay: .30s;
     }

     &::after{
         display: block;
        position: absolute;
        width: 25px;
        height: 25px;
        background-color: red;
        content: "";
        left: 40px;
        bottom: 0px;
        animation: inherit;
        animation-delay: .45s;
       }
   }
}

 @keyframes mymove {
      0% {
      opacity: 1;
    }

      100% {
        opacity: 0;
  }
}

JS Fiddle

htmlcsssasscss-animationskeyframe

Answer №1

The flickering occurs because an animation is applied to the parent element, the child.

When the animation on the parent doesn't have a delay, it starts before the children elements, but then gets overridden by them once their delay time has passed, resulting in a quick flash.

To prevent this issue in the future, it's recommended to remove the animation from the child.

.container {
  position: fixed;
  left: 150px;
  top: 50px;
}

.container .child {
  position: absolute;
}

.container .child::before {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: red;
  content: "";
  right: 40px;
  animation: mymove 1s infinite;
  animation-delay: 0.15s;
}

.container .child div {
  width: 25px;
  height: 25px;
  background-color: red;
  animation: mymove 1s infinite;
  animation-delay: 0.3s;
}

.container .child::after {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: red;
  content: "";
  left: 40px;
  bottom: 0px;
  animation: mymove 1s infinite;
  animation-delay: 0.45s;
}

@keyframes mymove {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<div class="container">
  <div class="child">
    <div></div>
  </div>
</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

Connecting CSS and JS files in JSP was a bit of a challenge

Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...

javajavascriptcssjsp

Want to easily switch between pictures in the Gallery?

I've created a gallery using jQuery, CSS & HTML and now I want to implement next and previous image buttons. I have added the buttons to the page and written functions for them, but I am struggling with the implementation. Here is my code, if anyone h ...

javascriptjqueryhtml

Stopping video playback when hovering over it

Can anyone help me modify this code so that a video plays only when hovering over it, and stops playing once the hover ends? What changes should I make to the JavaScript portion of the code for this functionality? <div class="padding-box height-40"&g ...

javascripthtmljquerycss

Creating a Functional Right Arrow on a Pure CSS Select Menu/Dropdown

I have implemented a custom select/dropdown menu by following the solution provided here: The functionality works well, but I am facing an issue where the dropdown options only appear when clicking on the box. Clicking on the 'arrow' located on ...

htmlcssdrop-down-menu

Minimize the space between flex items

I'm currently working with a <div> container styled as flex using the following CSS properties: .icon-container { padding: 3px; padding-top: 15px; padding-bottom: 15px; display: flex; flex-direction: column; align-content ...

htmlcssflexbox

Guide to Modifying the Parameter Value in JMeter's "Http Request" for a checkbox with "title" text managing the state

In the HTML code, there is a checkbox element that initially has the title "Select all rows in this table": <input type="checkbox" class="form-checkbox" title="Select all rows in this table"> Upon inspection, the title ...

htmlregexjmeter

The index.html file is unable to read the main.css file specifically on Chrome (desktop) browsers

Currently, my website is being hosted by 000webhostapp.com. It seems to be functioning correctly in all browsers such as Mozilla, Opera, and on mobile devices, but there seems to be an issue specifically with desktop Chrome. After checking with the W3C val ...

htmlcssgoogle-chromeadblock

Update the text within a textarea by clicking with the power of jquery

Is there a way to clear the content of my textarea on click? Below is the code snippet: http://jsfiddle.net/QMfyP/ <textarea name="adventage" style="width:400px; border-radius: 3px; border-left: 4px solid #6C3" id="adventage" cols="45" rows="5">Sh ...

jqueryhtmlcss

Optimizing the integration of Antd and SCSS in a Nextjs project to seamlessly resolve any style loading complications

In my Next.js project, I am utilizing Antd for UI components and SCSS for styling. However, the styles are not loading properly despite trying various solutions like modifying the next.config.js file. Despite setting cssModules to false in the next.config ...

reactjsnext.jssassantd

The alignment of list bullets is inconsistent across different web browsers

Check out this code snippet on JSFiddle: http://jsfiddle.net/PZgn8/8/. It's interesting to see how the rendering differs between Chrome 27 and Firefox 21. Despite the difference, I believe Firefox is actually displaying the desired outcome. <ul st ...

cssgoogle-chromefirefox

Combobox fails to dynamically update

Currently, I am attempting to create a dropdown menu that dynamically updates based on changes made in another dropdown menu. Despite my efforts, I have not been able to find a suitable solution and feel quite lost at this point. In an attempt to troubles ...

phphtmlajaxcombobox

Enhancing User Experience in Bootstrap 4: Making Dropdown Parents Clickable Links

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbar ...

javascripthtmlcsstwitter-bootstrap-4

What is the process by which photoswipe applies styles to blur an image upon clicking the share button?

If you want to see an example, check out this link: http://codepen.io/dimsemenov/pen/gbadPv By clicking on the Share button, you'll notice that it blurs the image (and everything else). Despite inspecting it closely, I still can't seem to figu ...

javascriptcssphotoswipe

Having trouble displaying image using absolute path in Express

Currently, I am developing a NodeJS application and have encountered an issue with a div element that has a background-image set in an external CSS file. Surprisingly, the CSS file functions perfectly when tested independently, and the background image dis ...

javascripthtmlcssnode.jsexpress

Sending chosen choice to controller method

I'm working with a table that contains inputs and angular models. <td> <select class="form-control" id=""> <option ng-model="mfrNo" ng-repe ...

javascriptangularjshtml

How to set up a multi-select box for tagging purposes

I tried to implement a multi select box to create tags using the code below. I downloaded select2.min.css and select2.min.js from https://github.com/select2/select2, then copied them into the project's css and js folders. Here is the HTML code snippe ...

javascripthtmlcsstwitter-bootstrap

Can the Browser width/document width be maintained when shrinking the browser window size?

https://i.stack.imgur.com/a4gfA.pngLooking for a solution to maintain the browser/document width at 350px, preventing users from minimizing the window. The desired width is actually 400px, not 350px. Please refer to the image above. I require the window ...

javascriptjqueryhtmlcsstwitter-bootstrap

JavaScript is submitting an incorrect HTML form

I have a PHP script that retrieves items from a database and allows users to vote on them. Each item is associated with an HTML form containing an input text field and a submit button to enter the score. I also have a jQuery script on the same page that up ...

phpjqueryhtmlforms

Retrieve the site's title content using PHP

I created a code to scrape website content from platforms like Facebook and Google+. $html = file_get_contents_curl($url); if ($html) { //parsing begins here: $doc = new DOMDocument(); @$doc->loadHTML($html); $nodes = $doc ...

phphtmlregexdomcurl

Input form and select form collide in conflict when the "Enter" key is activated

My search box includes input forms and a select form with various options. The issue arises when using the place autocomplete feature from Google Maps alongside the select form. When the enter key is pressed after entering a location in the autocomplete fi ...

javascriptjqueryhtmlformsbackbone.js