CSS3 Übergang auf Audio-Player

Question

Hallo Ich benutze das HTML5-Audio-Element und ich habe Probleme mit einem Übergang dafür. Im Moment habe ich ein Musiksymbol und wenn der Mauszeiger darüber steht, wird der gesamte Audioplayer gleichzeitig angezeigt. Ich möchte, dass der gesamte Audioplayer langsam über den CSS-Übergang angezeigt wird. Ist das möglich?

.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; 
 
}

<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"> 
 
    \t \t \t <audio 
 
    \t \t \t \t id="audioPlayer" 
 
    \t \t \t \t class="hide" 
 
    \t \t \t \t autoplay="true" 
 
    \t \t \t \t controls="true" 
 
    \t \t \t \t src=""> 
 
\t \t \t </audio> 
 
\t \t \t </span> 
 
    </div> 
 
</div>

Answer 1

Sie können auch transition mit transform gekoppelt verwenden, um einige Slick-Effekt erzielt

.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>

Answer 2

Hat es nicht testen, aber ich denke, das sollte funktionieren:

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

.show:hover .hide { 
    width: 195px; 
    -webkit-transition: width 2s; 
} 

Ist das, was Sie brauchen?