CSS animations failing to transition properly in Firefox

It seems that despite following all the necessary steps in my CSS, I am facing an issue with a transition not working properly in Firefox. The bounce-in effect I have implemented is failing to function as expected in this browser, even though Firefox does support keyframes. Below is a snippet of the relevant code...

 .animate {
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
 animation-duration: 1s;
}


 .animate.hinge {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;
}


 @-moz-keyframes bounceIn {
 /* line 83, ../sass/style.scss */
0% {
opacity: 0;
-webkit-transform: scale(0.3);
}

/* line 86, ../sass/style.scss */
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}

/* line 91, ../sass/style.scss */
70% {
-webkit-transform: scale(0.9);
 }

/* line 95, ../sass/style.scss */
 100% {
-webkit-transform: scale(1);
 }
}


 @keyframes bounceIn {
  /* line 119, ../sass/style.scss */
  0% {
  opacity: 0;
  transform: scale(0.3);
  }

 /* line 124, ../sass/style.scss */
 50% {
opacity: 1;
transform: scale(1.05);
 }

 /* line 129, ../sass/style.scss */
  70% {
   transform: scale(0.9);
  }

 /* line 133, ../sass/style.scss */
  100% {
transform: scale(1);
 }
 }

 /* line 139, ../sass/style.scss */
 .block {
 -webkit-animation-name: bounceIn;
 -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn;
 }

Could it be possible that I missed a certain prefix or used a property unsupported by Firefox?

cssfirefoxcss-animationskeyframe

Answer №1

To apply the transform properties in the @-moz-keyframe rule, use the -moz prefix instead of -webkit.

Check out this jsFiddle example - it's functional only on Firefox for demonstration purposes.

@-moz-keyframes bounceIn {
    0% {
        opacity: 0;
        -moz-transform: scale(0.3);
    }

    50% {
        opacity: 1;
        -moz-transform: scale(1.05);
    }

    70% {
        -moz-transform: scale(0.9);
    }

    100% {
        -moz-transform: scale(1);
    }
}

In addition to the CSS rules provided, you should use the following HTML structure:

<div class="block animate"></div>

This includes both the .block and .animate classes. The .animate class specifies the animation duration.

Answer №2

.fade-in {
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
 animation-duration: 1s;
}


 .fade-in.fade-out {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;
}


 @-moz-keyframes slideIn {
 /* line 83, ../sass/style.scss */
0% {
opacity: 0;
-moz-transform: scale(0.3);
}

/* line 86, ../sass/style.scss */
50% {
opacity: 1;
-moz-transform: scale(1.05);
}

/* line 91, ../sass/style.scss */
70% {
-moz-transform: scale(0.9);
 }

/* line 95, ../sass/style.scss */
 100% {
-webkit-transform: scale(1);
 }
}


 @keyframes bounceOut {
  /* line 119, ../sass/style.scss */
  0% {
  opacity: 0;
  transform: scale(0.3);
  }

 /* line 124, ../sass/style.scss */
 50% {
opacity: 1;
transform: scale(1.05);
 }

 /* line 129, ../sass/style.scss */
  70% {
   transform: scale(0.9);
  }

 /* line 133, ../sass/style.scss */
  100% {
transform: scale(1);
 }
 }

 /* line 139, ../sass/style.scss */
 .box {
 -webkit-animation-name: bounceOut;
 -moz-animation-name: bounceOut;
  -o-animation-name: bounceOut;
  animation-name: bounceOut;
 }

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

The content within a div block is having trouble aligning vertically

I need help with centering the content inside my fixed-top navigation bar vertically. I am using bootstrap to design my page, and the navigation bar consists of an image as the nav header and a container with links. The container surrounding these element ...

htmlcsstwitter-bootstrap

Rendering textures in Firefox using Three.js

I am currently working on creating a plane using three.js and applying a texture to it. The texture itself is generated from a canvas element. Interestingly, I have encountered some compatibility issues with Firefox specifically, as other browsers like IE ...

javascriptfirefoxthree.js

The order of CSS precedence shifts even when the class sequence is the same

In my development setup, I have a react component that is embedded within two distinct applications each with their own webpack configurations. Within the component, I am utilizing a FontAwesome icon using the react-fontawesome library: <FontAwesom ...

javascriptcssreactjswebpackfont-awesome

The CSS infinite animation becomes erratic and sluggish after a short period of time

My website featured a banner with a series of thumbnail images that animated at different intervals and looped indefinitely. Initially, the animations ran smoothly, but after a few seconds, they began to slow down and lose consistency. To troubleshoot, I u ...

htmlcssanimationanimate.css

Removing the gridlines in a Linechart using Apexcharts

I am experiencing issues with the grid and Nodata options on my Apexchart line chart. noData: { text: none , align: 'center', verticalAlign: 'middle', offsetX: 0, offsetY: 0, style: { color: undefined, fontSize: &apo ...

javascripthtmlcssangular

How can jQuery be used to display the size and type of linked files in title attributes?

For instance: Prior to <a target="_blank" href="http://www.adobe.com/devnet/acrobat/pdfs/reader_overview.pdf"> Adobe Reader JavaScript specification </a> As the file is in PDF format, the title should read title="PDF, 93KB, opens in a new ...

jquerycssxhtmlaccessibility

How can I dynamically assign a className in a React component based on the current state when importing styles?

I've been utilizing the style-loader to insert CSS modularly into my components ({style.exampleClassName}). My goal is to showcase a loader for a specific duration before displaying an image (at least 16 of these components in a grid layout). This i ...

javascriptcssreactjsreduxmodular

What is the best way to ensure that this <span> maintains a consistent width, no matter what content is placed inside

So here's the deal, I've got some dynamically generated html going on where I'm assigning 1-6 scaled svgs as children of a . The span is inline with 2 other spans to give it that nice layout: https://i.sstatic.net/mySYe.png I want these "b ...

javascripthtmlcss

Modifying CSS post-rendering to accommodate right-to-left or left-to-right text orientation

I have a unique single-page JavaScript website that retrieves text from a web request in JSON format. The direction of the text (RTL or LTR) is only determined once the response is received. Is there a method to re-render the page after receiving the res ...

css

Forming a space between borders

I'm attempting to create a space within a div's border that can accommodate an image, much like so: Is there a method to achieve this using only CSS? The only solution I have found is: .box { background: url(img.png) bottom left; border ...

cssimageborder

Testimonials paired with captivating visuals

I am interested in featuring a rotating selection of testimonials on my homepage. I would like to display only one testimonial at a time, with the content randomized upon each page refresh. My vision is for each testimonial to include a quote, the author& ...

jqueryhtmlcsswordpress

Tips on displaying text inside an icon

As a self-taught newcomer to web development, I apologize if this is a basic question. I'm trying to figure out how to display text inside an icon, like putting a number inside a heart. Would using a webfont icon not be suitable for this purpose? Is ...

cssicons

What is the best way to hide the background of an extension's HTML?

Currently, I am working on developing a Chrome extension for a university project. However, I am facing challenges in making the background or body of the extension's HTML completely transparent to achieve a cleaner interface. The issue specifically l ...

javascripthtmlcssjson

Controlling MYSQL data is not possible

When I retrieve data from the database, everything is functioning correctly, but the data flow seems uncontrolled. Here is a snippet of my code... <?php session_start(); include 'conn.php'; include '../includes/layouts/header.php'; ...

phphtmlmysqlcss

Conceal / Modify / Incorporate a picture

My ultimate goal is to have a hidden box and image that will be revealed based on the result of other functions. The box should change its background color, display an image, and switch images depending on the function called. I am facing two issues with ...

javascripthtmlcssimagesrc

Tips for adjusting the alignment of numbers in an ordered list to the right

Check out the code snippet below: The list items are correctly aligned to the right, but the numbers are not. How can we adjust the CSS so that the numbers align properly on the right as well? ol { width: 15vw; } <ol style="text-align:right;"> ...

htmlcss

Tips for customizing the appearance of material-ui SelectField

Currently, I am utilizing material-ui alongside react with the version "material-ui": "^0.19.2". I am facing an issue while attempting to embed a SelectField inside a table. Although the functionality is working smoothly, there are two unexpected behaviors ...

cssreactjsmaterial-ui

Can you explain the purpose of CSS classes such as my-2, my-lg-0, and mr-sm-2 in Bootstrap 4?

I have searched through various questions and the Bootstrap documentation but haven't been able to determine the purpose of these classes on elements. Any assistance would be greatly appreciated! My goal is to adjust my search bar's size to 1/4th ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Synchronizing CSS3 Animation Events and Event Listeners in jQuery: A Complete Guide

I've been exploring different ways to utilize CSS3 Animation Events and Event Listeners across browsers for more precise control over CSS3 animations. While I know it's possible, I'm struggling to implement it due to my current limitations d ...

jquerycssanimation

Position the center button on the Bootstrap navbar while keeping it outside the collapse menu

I want a button in the navbar that: stays inline with other navbar items (doesn't go to the next line); sits outside of the collapsed navbar section; and remains centered on the page for all screen sizes, even when the right side of the navbar is c ...

csstwitter-bootstrap