Firefox Animation Not Starting on Toggle Display Style

Firefox animation not starting on toggle display style

After research and testing, the real question actually appears to be, "Why does WebKit wait to play the animation until the element is displayed." Both Firefox and Internet Explorer continue to play the animation, even when it is display: none;, but WebKit browsers such as Chrome and Safari wait. This Mozilla bug report comment on a related issue suggests that Firefox does it this way in order to follow the specification, stating that matching Chrome's behavior would require changing the specification.

So it seems that Firefox and Internet Explorer are rightfully running the animation regardless of the display state, but WebKit is instead choosing to optimize the rendering by not running animation on display: none; elements. Remember that WebKit still has yet to un-prefix the animation properties because of unresolved discrepancies.

I was unable to find a different set of CSS rules that would achieve your desired result. I think your best workaround is to add the animation class on the click handler or use a class that sets the display value and enables the animation.

UPDATE:

apaul34208 has provided a JSFiddle to demonstrate this workaround.

Firefox CSS doesn't animate but Chrome does

I got answer from another question: Firefox animation not starting on toggle display style

Firefox and Internet Explorer are rightfully running the animation
regardless of the display state

So to work this around, you can set animation to checked state, like this:

input[type=checkbox]:checked ~ div.overlay-dialogue {  
    display: block;
    animation: ANIM_NAME 0.5s ease-in-out; 
    ...
} 

CSS Transition: opacity and visibility transition not working on Firefox (works on Chrome / Safari)

I think this is due to when the visibility is changed in the transition and seems to display inconsistently between browsers.

This demonstrates your code and for me in Firefox if you toggle the element quickly it does not transition smoothly. This is always how I've done similar transitions and only recently started noticing the problem.

var element = document.querySelector(".element")var toggle = document.querySelector(".element-toggle")
toggle.addEventListener("click", function(event) {  element.classList.toggle("active");});

.element{  opacity: 0;  visibility: hidden;  transition: opacity 500ms ease, visibility 500ms ease;}
.element.active{  opacity: 1;  visibility: visible;}

<div class="element">This is a div element</div>
<button type="button" class="element-toggle">Toggle</button>

BS3 carousel + animate.min.css not working perfectly in Firefox

If you look at the example on their site the classes are applied and if you want to trigger again you need to remove and add classes again. That is how CSS3 animation is restarted or triggered again by removing and adding classes again. You can read more about this here. In your case the classes are not removed and added again.

For Bootstrap you can use the slide.bs.carousel where you can add the classes again. I have added a data attribute [data-animation] to the elements for the respective animation.

<div class="active item">
    <img src="http://lorempixel.com/1024/750" alt="Slide1" class="img-responsive animated pulse" data-animation="pulse" />
    <div class="container">
       <div class="carousel-caption">
           <h1 class="animated fadeInLeft" data-animation="fadeInLeft">Another example headline.</h1>

           <p class="animated fadeInRight" data-animation="fadeInRight">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       </div>
     </div>
</div>

JS code

function animateElement(obj, anim_) {
    obj.addClass(anim_ + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass();
    });
}

$('#myCarousel').on('slide.bs.carousel', function (e) {

    var current = $('.item').eq(parseInt($(e.relatedTarget).index()));
    $('[data-animation]').removeClass();
    $('[data-animation]', current).each(function () {
        var $this = $(this);
        var anim_ = $this.data('animation');
        animateElement($this, anim_);
    });
});

Fiddle Demo

Starting CSS animation when element is beeing displayed

Move .hidden after .badge and remove the animations:

.hidden {
    animation: none;
    display: none;
}

Updated fiddle

Hover.css Library Animations not working in Firefox or Edge, but works in chrome?

Instead of .hvr-underline-from-center in the CSS, explicitly say li..hvr-underline-from-center.

Full Example:

 li.hvr-underline-from-center {
 display: inline-block;
 vertical-align: middle;
-webkit-transform: translateZ(0);
 transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
 -moz-osx-font-smoothing: grayscale;
 position: relative;
 overflow: hidden;
 }
 li.hvr-underline-from-center:before      {
 content: "";
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: red;
 height: 4px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
  -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function; ease-out;
  transition-timing-function: ease-out;
 }
 li.hvr-underline-from-center:hover:before, li.hvr-underline-from-center:focus:before,  li.hvr-underline-from-center:active:before {
   left: 0;
   right: 0;
  }

For some reason, Firefox requires elements to be called out in CSS explicitly. This should work with edge and Firefox now.

Svg animation not working in Firefox - working in chrome, opera

You appear to have a @-webkit-keyframes definition for webkit, but none for any other browsers.

Try adding

@keyframes dash {
    from {
        stroke-dashoffset: 2000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

Plus ones for any other browsers you want to support.

---

Related Topics