Maintaining z-index at end of a CSS3 transition on Safari

Question

I want to change the z-index of a div by clicking it, only with CSS3. I'm being able to achieve it with my code in all browsers except safari. I've already tried it with :target transition and :target animation (using animation-fill-mode: forwards) and both do not work.

Here is my code (simplified):

#flap1 {
z-index: 30;
}

#flap1:target {
transition: all 1s ease-in-out;
z-index: 1;
}

How do I maintain the z-index in the final value (=1) ? While the animation is going on, the z-index do change it's value.

Answer 1

I am not sure that can be done with CSS. You can run a simple JavaScript function to get this effect. Also, elements that have a z-index need to be either positioned relative, absolute or fixed in order for the z-index to take effect.

The CSS:

#flap1 {
  position: relative; /* Change positioning to your liking */
  z-index: 30;
  transition: all 1s ease-in-out;
}

The JavaScript:

var box = document.getElementById('flap1');

box.addEventListener('click', function() {
  this.style.zIndex = '1';
});