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 posting images upon clicking a div instead of a submit button

Using JavaScript variables within the value section of a JSON is a common requirement for developers

Manipulating a textarea in jQuery by inserting a string and selecting a specific portion of it

Node.js and Angular.js communication: from requests to responses

JavaScript - Modify input character prior to appending it to the text area

Using fancybox to send an ajax post request to an iframe

Using the JavaScript selectionchange event to target a specific element exclusively

Dynamic styling based on conditions in Next.js

Occurrences repeating several times following the incorporation of fresh content into the DOM

Attempting to locate the precise jQuery selector for a specific element

Changing a numeric string into a number within an Angular 2 application

Error: The function "execute" has not been declared

Unable to manipulate dynamically added content using .load method

Simple Mobile-Friendly Tabs - mobile tabs are always visible

Steps to clear the form in vue after the ajax request has been successfully submitted

What is the process for importing a file with an .mts extension in a CJS-first project?

showcase every value upon submission in the form with options to edit and delete

What is the best approach to identify duplicated objects within an array?

Tips on how to dynamically uncheck and check the Nebular checkbox post-rendering

Tips for sending an icon as a prop in React components