iOS CSS Opacity + Visibility Transition

iOS CSS opacity + visibility transition

Only opacity on transition sucks.

Since that on iPhone you need to tap in order to focus an element this is how I've fixed my problem:

.mydiv {
        visibility:hidden;
        opacity: 0;
        transition: all 1s ease-out; 
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
}
.mydiv:hover {
            visibility:visible;
            opacity: 1;
}
.mydiv:active {
            -webkit-transition: opacity 1s ease-out;
}

I've added the opacity transition to :active.

This way it works with all transition animation (consider that you want to apply animation to height or something else) on Chrome, Firefox and iPhone (on tap).

Thanks to Grezzo and Michael Martin-Smucker for spotting out about the opacity transition.

(copy/paste of my response from CSS animation visibility: visible; works on Chrome and Safari, but not on iOS)

CSS animation visibility: visible; works on Chrome and Safari, but not on iOS

I finally found a solution after finding this question on SO: iOS CSS opacity + visibility transition.

I had to apply the transition to opacity only when setting visibility: visible, but leave it applied to visiblity: hidden in order to make the opacity animate before it got hidden.

My updated and working fiddle is http://jsfiddle.net/Vkpwm/3/.

CSS opacity transition in iOS webview

probably using this:

-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;

CSS opacity and transition break hyperlink on mobile device (iOS)

One option is simply to feed those styles only to larger screens, via a media query. E.g.

@media only screen and (min-width: 30em) {
  a img {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
  }

  a img:hover {
    opacity: 0.5;
    visibility: visible;
  }
}

webkit does not animate opacity

-webkit-opacity has its fallback a plain opacity. Try modeling that with your keyframe by writing:

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

CSS transform transition backface-visibility not working

Here's the updated code.

Chrome has a weird bug when rotating elements, so backface-visibility was needed after all, just not on the .card itself.

$(document).ready(function(){

   $(".card").click(function(){

     $(this).toggleClass("turned");

     $(this).toggleClass("unturned");

   });

});

body{

  background-color:#5AEDBC;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  overflow:hidden;

}

.card:after{

  box-sizing:border-box;

  backface-visibility:hidden;

  display:block;

  content:'';

  width:200px;

  height:400px;

  left:380px;

  position:absolute;

  background: cadetblue;

  transform:rotateZ(-40deg);

  backface-visibility:hidden;

}

.card{

  padding:20px 50px;

  overflow:hidden;

  position:absolute;

  width:350px;

  height:120px;

  display: flex;

  justify-content: center;

  align-items:center;

  flex-direction: row;

  background-color:white;

  font-family:'Raleway', sans-serif;

  border:5px solid rgba(0,100,100, 0.75);

  color:#008A45;

  margin-top:100px;

  transition:all 1s ease;

  transform-origin:0 100%;

  transform-style: preserve-3d;

}

.cardBack {

  width:100%;

  height:100%;

  position:absolute;

  top: 0;

  left: 0;

  background-color:white;

  z-index:101;

}

.card.unturned .cardBack{

  opacity: 0;

  transition: opacity 0.25s ease 0.25s;

}

.card.turned .cardBack{

  opacity: 1;

  transition: opacity 0s ease 0.15s;

}

/* this is needed for chrome */

.card > * {

  backface-visibility: hidden;

}

/* */

.card.turned{

  transition:all 1s cubic-bezier(.17,.67,.59,1.35);

  transform:rotateX(-180deg);

}

.info{

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align:right;

  backface-visibility:hidden;

}

.title{

  font-size:26px;

  font-weight:bold italic;

  color:black;

  padding:5px 0;

  display:block;

}

.desc{

  font-size:18px;

  color:#ccc;

  padding:5px 0;

  display:block;

}

.img{

  border-radius: 50%;

  width: 90px;

  height: 90px;

  margin-left:20px;

  backface-visibility:hidden;

  z-index:100;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>

<div class="card unturned">

  <div class="cardBack"></div>

  <div class="info"><span class="title">Interesting person 1</span><span class="desc">Description of the interesting person 1</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>

</div>

<div class="card unturned">

  <div class="cardBack"></div>

  <div class="info"><span class="title">Interesting person 2</span><span class="desc">Description of the interesting person 2</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>

</div>

<div class="card unturned">

  <div class="cardBack"></div>

  <div class="info"><span class="title">Interesting person 3</span><span class="desc">Description of the interesting person 3</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>

</div>

---

Related Topics