CODEWITHSUNDEEP
javascriptjquerycsscss-animations
Timo D
Timo D

Reputation: 1803

CSS3 Animation: Forwards fill not working with position and display on Safari

So, I have created a CSS3 animation that is supposed to fade out an element by setting its opacity from 1 to 0 and at the last frames change the position to absolute and display to none. But on Safari it will only maintain the opacity, position and display are not set to the final values.

@-webkit-keyframes impressum-fade-out {
  0% {
    opacity: 1;
    display: block;
    position: relative;
  }
  99% {
    opacity: 0;
    position: relative;
  }
  100% {
    opacity: 0;
    display: none;
    position: absolute;
  }
}

It seems to work on Chrome but not on Safari (I tried version 8). Apparently, position and display do not work properly with animation-fill-mode: forwards...

JSFiddle: http://jsfiddle.net/uhtL12gv/

EDIT For Bounty: I am aware of workarounds with Javascript and transitionend events. But I am wondering why Browsers lack support for this? Does the specification state that fillmode forwards doesnt apply to some attributes like position or is this a bug in the browsers? Because I couldnt find anything in the bug trackers.. If anybody has some insight, I would really appreciate it

Upvotes: 5

Views: 3271

Answers (2)

sergdenisov
sergdenisov

Reputation: 8572

I would suggest you the cross-browser solution based on CSS3 Transitions and transitionend event:

JSFiddle

$('.block').one('click', function() {
    var $this = $(this);

    $this.one('webkitTransitionEnd transitionend', function() {
        $this.addClass('block_hidden');
        $this.removeClass('block_transition');
    });

    $this.addClass('block_transition');
});
.block {
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

    .block_2 {
        background: red;    
    }

    .block_transition {
        opacity: 0;
    }

    .block_hidden {
        display: none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

Upvotes: 1

IMI
IMI

Reputation: 2469

As Suggested in the comments, you can adjust the height.

EDIT: Animation Reference Links Added.

$('.block').click(function() { $(this).toggleClass('active') });
@-webkit-keyframes impressum-fade-out {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    height:0;  
  }
}

.block {
  width: 100px;
  height: 100px;
  background: blue;
}

.block2 {
  width: 100px;
  height: 100px;
  background: red;    
}

.block.active {
  -webkit-animation-name: impressum-fade-out;
        animation-name: impressum-fade-out;
  -webkit-animation-duration: 500ms;
        animation-duration: 500ms;
  -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block2"></div>

Upvotes: 2

Related Questions