The animation-play-state is set to 'running', however, it refuses to start playing

Question

The animation-play-state is set to 'running', however, it refuses to start playing

I'm in the process of creating a landing page that includes CSS animations, such as fade-ins. Initially setting animation-play-state: "paused" in the CSS file, I later use jQuery to trigger the animation while scrolling through the page.

While this setup works perfectly on Chrome on my Mac, attempting to run it on both Safari and Chrome on my iPhone has proven unsuccessful.

After inspecting console logs and debugging extensively, everything appears to be functioning properly except for the actual animation not running (despite the animation-play-state changing to "running").

One last detail - if I place the

$(".row").css("animation-play-state", "running");

statement before the if statement, it performs as expected.

Here's the jQuery statement in question:

//the position where I want the animation to trigger

var destinations = $('#destinations').offset().top - 300;

//the event listener

if($(window).scrollTop() > destinations) {
        $(".row").css("-webkit-animation-play-state", "running");
        $(".row").css("animation-play-state", "running");
}

Any insights on what might be causing this issue? Thank you in advance! Niv

javascript jquery css jquery-ui css-animations

Answer 1

Answer №1

Encountered an interesting problem today while attempting to create a reveal animation by changing the animation-play-state.

In addition, the animation-fill-mode: both; property was also defined.

The keyframes I used looked like this


    @keyframes fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

Despite trying various solutions, nothing seemed to work in Safari. The versions tested were 11.1.2 (13605.3.8) (Stable) and Safari Technology Preview Release 63 (Safari 12.1, WebKit 13607.1.2.1), on both Macbook and iPhone - but the result remained the same, with no animation playing.

To summarize, simply changing the animation-play-state property won't work in Safari. Instead, try altering the animation-name property.

I found a workaround using opacity and transform to reveal elements, where creating a temporary animation name helped:


    @keyframes be-hidden {
        from { opacity: 0; }
        to { opacity: 0.0000001; }
    }
    @keyframes fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    div {
        animation-name: be-hidden;
        animation-duration: 600ms;
        animation-fill-mode: both;
        animation-delay: 500ms;
        animation-iteration-count: 1;
    }
    div.revealed {
        animation-name: fade;
    }

Assign a animation-name to a temporary animation that hides elements, then switch it to another (.revealed class)

If there are alternative ways to solve this issue, I would love to explore them.

Possibly related:

Answer 2

Encountered an interesting problem today while attempting to create a reveal animation by changing the animation-play-state.

In addition, the animation-fill-mode: both; property was also defined.

The keyframes I used looked like this


    @keyframes fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

Despite trying various solutions, nothing seemed to work in Safari. The versions tested were 11.1.2 (13605.3.8) (Stable) and Safari Technology Preview Release 63 (Safari 12.1, WebKit 13607.1.2.1), on both Macbook and iPhone - but the result remained the same, with no animation playing.

To summarize, simply changing the animation-play-state property won't work in Safari. Instead, try altering the animation-name property.

I found a workaround using opacity and transform to reveal elements, where creating a temporary animation name helped:


    @keyframes be-hidden {
        from { opacity: 0; }
        to { opacity: 0.0000001; }
    }
    @keyframes fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    div {
        animation-name: be-hidden;
        animation-duration: 600ms;
        animation-fill-mode: both;
        animation-delay: 500ms;
        animation-iteration-count: 1;
    }
    div.revealed {
        animation-name: fade;
    }

Assign a animation-name to a temporary animation that hides elements, then switch it to another (.revealed class)

If there are alternative ways to solve this issue, I would love to explore them.

Possibly related:

The animation-play-state is set to 'running', however, it refuses to start playing

Answer №1

Similar questions

Tips for storing dynamic data in an array using JavaScript

Implementing SVG in NextJS 13 with custom app directory: A step-by-step guide

Receiving a blank string after calling fs.readFile within the chokidar.watch(path_file).on('change', ...) function

Generating a preview image for a three.js environment

Why is this element occupying an excessive amount of space horizontally?

When using node.js express, the req.body object does not yield any results

What is the best way to incorporate an image as an input group addon without any surrounding padding or margin?

Guide on creating 2 select inputs with distinct elements?

What is the best way to vertically center a column of images on mobile devices in a responsive manner?

Center align the division within the list item

The alignment of the background images is off

What is the most effective method to retrieve the UserName using Javascript?

Flowing Waterways and Transmission Control Protocol

Error message indicating a problem with the locator By.linkText that contains dots in Selenium: TypeError - Invalid locator

Picking specific <button> items

Retrieve the JSON data from an AJAX request

When the NPM package is imported as a whole, it shows up as undefined. However, when it

Blending Angular5 and AngularJS in Polymer

Is there a way to incorporate a base64 encoded image from a text file into an HTML image?

Intercepting the K-pager navigation with a pop-up modal for user confirmation before switching to a different page