I've tried a few variations of using webkit-transition that I've found from googling but I've not been able to get any to work. I have some audio controls that I make appear on a click event, they appear suddenly and jerky so I want to fade them in. The target browser is iOS so I am trying webkit extensions.

This is what I currently have:

  <div id = "controls">
    <audio id = "audio" controls></audio>
  </div>


#controls {
    position:absolute;
    top: 35px;
    left:73px;
    height: 20px;
    width: 180px;
    display:none;
}

#audio {
    opacity:0.0;
}


audio.src = clip;
audio.addEventListener('pause',  onPauseOrStop, false);
audio.addEventListener('ended',  onPauseOrStop, false); 
audio.play();
audioControls.style.display = 'block';
audio.style.setProperty("-webkit-transition", "opacity 0.4s");
audio.style.opacity = 0.7;

The documentation for webkit-transition says it takes effect on a change in the property, so I was assuming changing style.opacity in the last line would kick it off.

The controls appear with an opacity of 0.7 but I want it to fade in and that animation isn't happening.

I also tried this:

#audio {
    opacity:0.0;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-timing-function: ease-in;
}

Also tried

audio.style.webkitTransition = "opacity 1.4s";

from this posting How to set CSS3 transition using javascript?

I can't get anything to work, I'm testing on iOS, Safari desktop and Chrome. Same non result on all of them.