Henry Asare Henry Asare - 27 days ago 8
HTML Question

CSS3 Transition on audio player

Hello I am using the HTML5 audio element and I am having trouble with a transition for it. Right now I have a music icon and when the cursor hovers over it, it shows the whole audio player at once. What I want it to do is slowly show the whole audio player via CSS transition. Is this possible?

HTML

<div class="header">
<p class="heading">Heading</p>
<div class="show pull-right">
<i class="fa fa-music fa-2x" aria-hidden="true"></i>
<span class="player">
<audio
id="audioPlayer"
class="hide"
autoplay="true"
controls="true"
src="">
</audio>
</span>
</div>
</div>


CSS

.header {
float: left;
width: 100%;
margin: 10px 0px 10px 0px;
}

.heading {
font-family: tahoma, sans-serif;
font-size: 20px;
display: inline;
}

.hide {
display: none;
}

.player {
width: 0px;
-webkit-transition: width 2s;
}

.show:hover .hide {
display: inline;
width: 195px;
}

Answer

You can also use transition coupled with transform to achieved some slick effect

.header {
  float: left;
  width: 100%;
  margin: 10px 0px 10px 0px;
}
.heading {
  font-family: tahoma, sans-serif;
  font-size: 20px;
  display: inline;
}
.hide {
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transition: all 0.5s;
}
.player {
  width: 0px;
  -webkit-transition: width 2s;
}
.show:hover .hide {
  display: inline;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  width: 195px;
}
<div class="header">
  <p class="heading">Heading</p>
  <div class="show pull-right">
    <i class="fa fa-music fa-2x" aria-hidden="true">Hover here</i>
    <span class="player">
        <audio id="audioPlayer" class="hide" autoplay="true" controls="true" src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg">
        </audio>
        </span>
  </div>
</div>