How do I make an element scale down to nothing using a CSS transition on the iPhone?
Question
I’m trying to use the proprietary iPhone Safari properties -webkit-transition
and -webkit-transform
to make an element disappear with a graceful animation. Code:
<div id="right" style="font-size: 500%; text-align: center; background-color: #fdf; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s;">3</div>
<script type="text/javascript">
function shrinky() {
this.style.webkitTransform = 'scale(0,1)';
}
document.getElementById('right').onclick = shrinky;
</script>
I’d expect the element to shrink down to invisible with a graceful animation.
This works fine on desktop Safari (3.2.1 (5525.27.1) on OS X 10.5.6), but on the iPhone (iPhone OS 2.2.1 (5H11)), the div
just disappears abruptly.
Is there any way to make the animation work like Apple’s documentation (registration required, I think) says it should?
Solution
Setting the first scale
argument to a very small decimal, rather than 0, seems to make the animation work. Code:
<div id="right" style="font-size: 500%; text-align: center; background-color: #fdf; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s;">3</div>
<script type="text/javascript">
function shrinky() {
this.style.webkitTransform = 'scale(0.000001,1)';
}
document.getElementById('right').onclick = shrinky;
</script>
Not sure if this is an iPhone bug or not, but it seems like it.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow