Geek Answers Handbook

CSS3 Animation: Forwards fill a non-working position and display on Safari

So, I created a CSS3 animation that should disappear from the element, setting its opacity from 1 to 0 and in the last frames change the position values ​​to absolute and display to none . But in Safari, it will only support opacity, position and display will not be set to 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 option 8). Apparently, the position and display do not work properly with the fill-animation mode: go ahead ...

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

EDIT For Bounty: I am aware of workarounds with Javascript events and transition events. But I wonder why the browser lacks support for this? Does the specification indicate that fillmode formatting does not apply to some attributes, such as position, or is this a bug in browsers? Because I could not find anything in the error tracker. If anyone has an understanding, I would really appreciate it.

+4
source share
2 answers

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

EDIT: Added links for animation links.

 $('.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>
+1
source

I offer you a cross-browser solution based on CSS3 Transitions and transitionend :

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>
+1
source

More articles:


All Articles