The transition effect of changing opacity from 0 to 1 is not functioning properly in Firefox

Having some trouble with this animation not working in Firefox.

I'm triggering the animation using JavaScript after a delay like so:

document.getElementById('my_id').style.webkitAnimationPlayState = "running";

I've also attempted:

style.animationPlayState

Interestingly, changing the background-color animation within the same file works perfectly fine. Could it be an issue with opacity specifically on Firefox?

#my_id {
  opacity: 0;
  animation: animation 1s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
  -webkit-animation: animation 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-play-state: paused;
}

@keyframes animation {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0.2;}
}

The CSS snippet above pertains to the element being animated.

javascriptcssfirefoxanimationopacity

Answer №1

Instead of relying on JavaScript to insert the -webkit-animation-play-state, simply assign a class with all browser prefixes to your #my_id div using the onload event.

JavaScript

window.onload = function() {
  document.getElementById("my_id").className += "running";
}

CSS

#my_id.running {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
}

The provided code applies the .running class to your #my_id element, setting animation-play-state: running with all necessary browser prefixes included. To test this implementation, feel free to view my demonstration based on your code. I have verified its functionality in Firefox (51), Chrome, Opera, and Safari.

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

Converting HTML table data into a JavaScript array

On my website, I have an HTML table that displays images in a carousel with their respective positions. The table utilizes the jQuery .sortable() function to allow users to rearrange the images by dragging and dropping. When an image is moved to the top of ...

javascriptphpjqueryhtmljquery-post

What is causing my Bootstrap Controls to malfunction?

I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm un ...

javascripthtmlcsstwitter-bootstrapbootstrap-carousel

Could someone provide me with guidance on how to troubleshoot this error message?

[0] Unhandled rejection MongoError: (Unauthorized) not authorized on admin to execute command { listIndexes: "sessions", cursor: { } } [0] at MongoError.create (/Users/biggahd/Desktop/Mars-EMS-1/backend/node_modules/mongodb-core/lib/error.j ...

javascriptmongodbexpresssails.jsmongodb-atlas

Strategies for preserving context throughout an Ajax request

In my project, I am looking to implement an Ajax call that will update a specific child element within the DOM based on the element clicked. Here is an example of the HTML structure: <div class="divClass"> <p class="pClass1">1</p> &l ...

javascriptajaxjquery

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this: https://i.stack.imgur.com/OMfhp.png In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstra ...

htmlcsstwitter-bootstrap

Encountering a 404 (Not Found) error when attempting to make an API call in React JS with Azure MVC

When trying to make a POST API call from my React app to an Azure MVC controller, I encountered an error in the console: POST http://localhost:3000/api/SampleData/AcknowledgeRole 404 (Not Found) This error is puzzling because I have clearly defined the ...

javascriptc#reactjsredux

Code Not Functioning on Website Despite Working in Console

I've developed a jQuery script that eliminates any delivery methods containing the phrase "Royal Mail" if certain products are present in the user's cart. The script functions flawlessly when executed in Google Chrome Console but fails to work wh ...

javascriptjqueryhtml

The issue of deleting the incorrect document ID in React Firebase

I'm currently facing an issue while trying to implement a delete operation on a Firebase database using Reactjs. The problem lies in my function that seems to be fetching the wrong id from Firebase. There's a button triggering the handleOpen fun ...

javascriptreactjsfirebasegoogle-cloud-firestorematerial-ui

Vue.js navigation guards, restrict access to all unauthorized routes, grant entry to specific routes upon successful authentication

I'm currently working on implementing a navigation guard in Vue.js with a specific logic: I want to restrict access to all routes that require authentication and redirect users to the login page if they are not authenticated. The only exception is the ...

javascriptspringvue.jsvuexvue-router

Highlight text when the user is scrolling the page - using JQUERY

Can anyone suggest a way to dynamically underline text as the user scrolls down a webpage? The underline should only be visible while the user is scrolling. I've experimented with animate.css and other plugins, but haven't been able to achieve th ...

javascriptjqueryhtmlcss

Advancing through time with progress

How can I display a progress indicator for events in fullcalendar based on the current time by changing their color dynamically in HTML? Thank you for your help! ...

javascripteventscalendarprogress

The jQuery AJAX response consistently comes back empty

Hello, I'm currently working on creating an HTML form and I need to validate it before submitting the form action. However, when I use AJAX to respond, I keep receiving a blank message. Can anyone help me with this issue? $(function(){ $("#ajax-p ...

javascriptjqueryhtmlajaxvalidation

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

After researching various image sliders online, I came across this specific one. It worked perfectly fine when I included the JavaScript directly in a script tag within the HTML file. However, as soon as I tried to link it via a .js file, the slider stoppe ...

javascripthtmlcss

Tips for passing parameters to an ajax request in Django URL?

In my current setup, I'm passing a URL to the ajax like this: $('.togglebtn').on("click",function(){ console.log("Hello") $.ajax({ type: 'GET', url: "http://loc ...

javascriptpythonjquerydjangoajax

What CSS property prevents a fixed header from overlapping a scrolled element?

After creating a fixed header for my HTML table, I noticed that as I scroll down the page, everything is being overlapped by the fixed header except for one slider (noUiSlider). I am curious to know which CSS property is preventing the header from overlayi ...

javascriptjqueryhtmlcss

Encountering an Invariant Violation: React does not allow objects to be used as children

I can't figure out why my code isn't working. Every time I run it, I get the error message: Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of chil ...

javascriptreactjsasynchronous

Mobile page scroll appears to be disabled due to the Vue range slider

Within my VUE application, I've implemented a range slider component that allows users to view different values as they drag the slider. Everything seems to be functioning correctly, but I've encountered an issue where the mobile version of the p ...

javascriptvue.jsrangeslider

Nuxt Js - Ensuring script is only loaded once during the initial page load

I already have a static website design, but now I'm converting it to Nuxt.js to make it more interactive. After running my Nuxt server with "npm run build...npm run start," the scripts load and my carousel/slides work fine. However, when I navigate to ...

javascriptvue.jsnuxtjs

"Experience the new Bootstrap 5 feature: Off-Canvas sliding from left to

I encountered the code snippet below on the official bootstrap 5 demo. Despite my efforts, I am struggling to figure out how to relocate the off-canvas menu from Left-to-Right. The divergence between the documentation code referencing offcanvas-start and t ...

javascriptjquerytwitter-bootstrapbootstrap-5

Using JQuery to modify several background images in unison

I have a CSS code that uses 8 images to create a frame: background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/b ...

javascriptjqueryhtmlcssbackground