Troubleshooting the issue of CSS animations activating twice and causing a flickering effect specifically in the Firefox browser

I am facing an issue with CSS animations in Firefox. When I try to slide in some radio buttons upon clicking a button, the animation seems to be firing twice in Firefox while it works fine in Chrome. I have attempted several solutions but haven't been able to fix this problem yet. Here is my code:

$(document).on("click", ".addLesson", function(){
    $(".contentList").addClass("fadeOutRight");
    $(".contentList").hide();
    $(".lessonOptions").addClass("fadeInLeft");
});

$(document).on("click", ".lessonCancel", function(){
    $(".contentList").removeClass("fadeOutRight");
    $(".contentList").addClass("fadeInLeft");
    $(".contentList").show();
    $(".lessonOptions").removeClass("fadeInLeft");
    $(".lessonOptions input[type='radio']").removeAttr("checked");
});

I am using animate.css styles for the animations - 

.fadeInLeft {
-webkit-animation: fadeInLeft 1s forwards;
animation: fadeInLeft 1s forwards;
}

@keyframes fadeInLeft {
0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}

.fadeOutRight {
-webkit-animation: fadeOutRight 1s;
animation: fadeOutRight 1s;
}

@keyframes fadeOutRight {
0% {
    opacity: 1;
}
100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
}
}

I suspect there might be a conflict between the JavaScript and CSS causing this issue, although it functions properly in Chrome.

Additionally, I have observed that when I hover over the lessOptions div being animated, it flickers or blinks once it's on display.

Any assistance regarding this would be greatly appreciated. Thank you for your time!

Take a look at the code here - http://codepen.io/anon/pen/IkhGp

javascriptjqueryhtmlcssanimation

Answer №1

I encountered this issue due to a conflict between the duration of my animation (0.5 seconds) and the transition property set to "all" with a duration of 1 second on my animated elements. This resulted in the animation triggering twice. The problem was resolved by removing the transition property and keeping only the animation.

Answer №2

It's been some time since this was originally shared, but I found myself here after facing a similar problem. In my case, it appears to only occur when the developer tools are active. Closing the tools and refreshing the page resolved the issue with the animation playing correctly.

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

Move the DIV element to a static section within the DOM

In my Vue app, I have implemented methods to dynamically move a DIV called 'toolbox' to different sections of the DOM. Currently, the DIV is positioned on the bottom right of the screen and remains static even when scrolling. My goal is to use t ...

javascriptcssvue.jspositioncss-position

Using numerous textures for a single mesh in THREE.js

I am working with an OBJ file that utilizes four textures. The UV coordinates in the file range from (0, 0) to (2, 2), where (0.5, 0.5) corresponds to a coordinate in the first texture, (0.5, 1.5) is a UV coordinate in the second texture, (1.5, 0.5) repres ...

javascript3dthree.jstexturesuv-mapping

What steps do I need to take in order to develop a cross-platform icon using React Native

Currently in the process of creating a signup form, I am looking to incorporate icons that will display differently based on the platform being used. For example, when utilizing Ionicons, I would like the icon to appear as ios-person on iOS devices and m ...

javascriptreactjsreact-nativereact-native-ios

What are some ways to prevent having to constantly check for the existence of an object within another object when working

<template> <img :src="user.avatar_thumbnail"> <a :href="user.profile.link"/> </template> <script> export default { data: function () { user: {} }, ...

javascriptvue.jsvuejs2

Encountered a problem while trying to inherit from the BrowserWindow class in

I utilized the https://github.com/SimulatedGREG/electron-vue template to craft a vue electron blueprint. Alongside the primary process index.js, I fashioned a file named MainWindow.js which holds the subsequent code: import { BrowserWindow } from 'el ...

javascriptnode.jsvue.jselectron

The art of efficiently handling and outputting an array of files using node

In a folder filled with markdown files like so: myDir |- fileA.md |- fileB.md |- fileC.md |- fileD.md I want to extract just the filenames without the file extension and store them in an array. This is my attempt: var mdFiles = fs.readdir('myDir&a ...

javascriptnode.jsfs

Invoking a function in an Angular 4 component using a <td> element

Take a look at this block of code: personListComponent.html <tr *ngFor="let person of personService.getPersons()"> <td (onShow)="getCountry(person)">{{person.name}}</td> <td>{{country}} </tr personListComponent.ts ...

htmlangulartypescript

Storing the model on the server with the help of Backbone and NodeJS

As a beginner in Backbone and AJAX, as well as being new to Node.js which my server is built on, I am working on saving a model using the Save method in Backbone for a webchat project for university. Right now, my goal is to send the username and password ...

javascriptajaxnode.jsbackbone.js

Revolutionary newspaper design utilizing asp.net's C# web forms

Trying to create a dynamic newspaper layout using ASP.NET C# web form. Struggling to set the page layout size inside a slider and display specific news content on a new page when clicking on an area of the newspaper using Repeater or another suitable contr ...

css

The function is not being executed when using $scope.$apply()

I am in need of a customized click directive that can execute the passed code using scope.$apply(). $(elem).on('click', function(){ scope.$apply(attrs.wdClick); }); Everything works smoothly when I pass something like wd-click="something = ...

javascriptangularjs

What is the best way to ensure that the width of dropdown menu items corresponds precisely to the width of the content

I have implemented the Reactstrap drop-down menu: import React from "react"; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from "reactstrap"; export default class DropDownTest extends React.Component { cons ...

htmlcsstwitter-bootstrapbootstrap-4reactstrap

Executing AJAX calls within a forEach loop

I'm facing a challenge with a function that carries out a foreach loop on a list of views and needs to make an AJAX request for each view within the loop. Upon receiving the results in the success callback, it checks if a specific ID is returned and, ...

javascriptjqueryautodesk-forgeautodesk-viewer

Creating a smooth fading effect for an element within a react component

I am currently working on implementing a fade out warning/error message (styled with Bootstrap) in a React component, however, I am encountering some challenges with the timing of the fade-out effect. Up to this point, the fade out effect is functioning c ...

javascriptcssreactjsclass-names

Ways to resolve the issue with the Argument of type 'Date[]' not matching the parameter type '(prevState: undefined) in React

I've encountered an issue while trying to construct my project. The error message reads as follows: Argument of type 'Date[]' is not assignable to parameter of type '(prevState: undefined) Here's the excerpt of the code in questio ...

javascriptreactjstypescriptnext.js

Displaying an Array in HTML using Angular

Just starting out with Angular and experimenting with data display from an array. The data in the array is: [Me, Three, Four] I attempted to loop through it for printing but encountered issues. Here's a snippet of how I'm currently handling it: ...

angularhtmlangular7

Bootstrap is designed to dynamically adjust to the size of the browser window, ensuring a smooth

After completing the construction of a new website, I encountered an issue where the styles and layouts are responsive when adjusting the browser window size. However, upon opening responsive inspect tool, no changes occur - columns refuse to break and t ...

htmlcsstwitter-bootstrapresponsive-design

What is the best way to verify if an Android permission request has been successfully granted or denied

I've been working on my RN application and encountered the following code snippet. import { PermissionsAndroid } from 'react-native'; export default new Promise(() => { return PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS ...

javascriptnode.jsreactjsreact-nativepromise

If the session cannot be located, users will be redirected to the sign-in page

I have a small application that utilizes next-auth to display a signin/signout button based on the user's sign-in status. The buttons function correctly and redirect me to the signin page when clicked. However, I am wondering how can I automatically ...

javascriptnext.jsnext-auth

Create a search bar using HTML and CSS that utilizes the GET method

My current challenge involves creating a search functionality using HTML based on the username entered, such as 'user'. Upon clicking the search bar, the page should redirect to http://localhost/searchuser/user I am encountering difficulties wi ...

htmlcss

Implementing mouse event listeners on dynamically created elements in Vue.js

I've been curious if anyone has attempted something similar to the following code snippet (created within a Vue.js method): for (let i = 0; i < this.items.length; i++) { let bar = document.createElement('div'); bar.className = this ...

javascriptvue.js