CSS3 Class Inherits Div Opacity in Safari 9.x? - html

Question

W-I-P DEMO (Reduced clutter and added "Correct" and "Incorrect" labels on cube faces for clarity.) An animated CSS cube with 4 autoplay slideshows and animated text (on hover) on each pane works as expected on all 4 cube faces in current versions of FF and Chrome (not yet tested in others), but Safari (both desktop and mobile versions) appear to be overriding the "slidetext" class with the "#keyframes slideshow" opacity (i.e., at 40% of the cube rotation), resulting in opacity-faded text on 2 of the cube faces ~1/2-way through the cube rotation. Where are my coding errors, or could this possibly be a Safari glitch?
HTML
<div id="cubecontainer">
<div class="shadowcontainer">
<div class="shadow">
<div> </div>
</div><!-- end of shadow -->
</div><!-- end of shadowcontainer -->
<div class="cubewrapper">
<div class="cube">
<div class="front"><a href="websites.php">
<div class="slideshowcontainerW">
<img class="slide" src="./images/cube/cubeW1.png" alt="W1" />
<img class="slide" src="./images/cube/cubeW2.png" alt="W2" />
<img class="slide" src="./images/cube/cubeW3.png" alt="W3" />
<img class="slide" src="./images/cube/cubeW4.png" alt="W4" />
</div><span class="slidetext">WEB SITES</span></a>
</div>
<div class="back"><a href="extraordinary.php">
<div class="slideshowcontainerE">
<img class="slide" src="./images/cube/cubeE1.png" alt="E1" />
<img class="slide" src="./images/cube/cubeE2.png" alt="E2" />
<img class="slide" src="./images/cube/cubeE3.png" alt="E3" />
<img class="slide" src="./images/cube/cubeE4.png" alt="E4" />
</div><span class="slidetext">EXTRAORDINARY</span></a>
</div>
<div class="top"> </div>
<div class="bottom"> </div>
<div class="left"><a href="profile.php">
<div class="slideshowcontainerP">
<img class="slide" src="./images/cube/cubeP1.png" alt="P1" />
<img class="slide" src="./images/cube/cubeP2.png" alt="P2" />
<img class="slide" src="./images/cube/cubeP3.png" alt="P3" />
<img class="slide" src="./images/cube/cubeP4.png" alt="P4" />
</div><span class="slidetext">PROFILE</span></a>
</div>
<div class="right"><a href="logos.php">
<div class="slideshowcontainerL">
<img class="slide" src="./images/cube/cubeL1.png" alt="L1" />
<img class="slide" src="./images/cube/cubeL2.png" alt="L2" />
<img class="slide" src="./images/cube/cubeL3.png" alt="L3" />
<img class="slide" src="./images/cube/cubeL4.png" alt="L4" />
</div><span class="slidetext">LOGOS</span></a>
</div>
</div><!-- end of cube -->
</div><!-- end of cubewrapper -->
</div><!-- end of cubecontainer -->
CSS
#cubecontainer {
float:right;
padding-left:50px;
padding-right:50px;
padding-top:10px;
padding-bottom:220px;
}
#cubecontainer:hover div {
animation-play-state: paused;
}
.cubewrapper {
perspective: 800px;
perspective-origin: 50% 100px;
transform-style: preserve-3d;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.cube p {
padding: 40px 0;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.95;
}
.back {
transform: translateZ(-100px) rotateY(180deg);
background-color: #FFF;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
background-color: #FFF;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
background-color: #FFF;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
background-color: #FFF;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
background-color: #FFF;
}
.front {
transform: translateZ(100px);
background-color: #FFF;
}
#keyframes cubespin {
from { transform: rotateY(0); }
to { transform: rotateY(-360deg); }
}
.cube, .shadow {
animation: cubespin 16s linear infinite;
}
.shadowcontainer {
perspective: 800px;
perspective-origin: 50% 100px;
}
.shadow {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.shadow div {
position: absolute;
width: 200px;
height: 200px;
top: 0px;
opacity: 0.98;
box-shadow: 0px 0px 50px 10px #000;
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
/*END CUBE*/
/*BEGIN CODE FOR SLIDESHOW ON CUBE FACES*/
.slideshowcontainerE, .slideshowcontainerL, .slideshowcontainerP, .slideshowcontainerW {
margin: 0 auto;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.slide {
position: absolute;
animation: slideshow 20s infinite;
opacity: 0;
}
.slidetext {
width:195px;
margin: 0px auto;
padding-right:5px;
position: absolute;
text-align: right;
font-size: 1em;
color:#FFF;
text-shadow: 0px 0px 5px #F00;
background:rgba(0,0,0,.75);
border: none;
}
.slidetext:hover {
width:195px;
margin:0px auto;
padding-right:5px;
position: absolute;
text-align: right;
font-size: 1em;
color:#F00;
text-shadow: 0px 0px 5px #FFF;
background:rgba(255,200,100,.75);
border: none;
transition: color, background .5s ease-in;
}
#keyframes slideshow {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 15s;
}
img:nth-child(2) {
animation-delay: 10s;
}
img:nth-child(3) {
animation-delay: 5s;
}
img:nth-child(4) {
animation-delay: 0s;
}
/*END CODE FOR SLIDESHOW ON CUBE FACES*/