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.