z-index issues with CSS animation - html

Question

First time posting here, have long used the site as a resource for any problems I come across but for the first time I haven't been able to fix my code using previous answers.
There's probably a very simple answer for what I'm asking and I'm just missing something.
I am trying to create a snippet that I can use in a production site soon. I want to create an image "frame" that sits around an image. I also then want this frame to be animated and swing from side to side.
Before I insert the animation code, the code is as below, and works perfectly (the frame is above the image).
.frame {
margin-top: 5rem;
margin-left: 35%;
display: inline-flex;
background-image: url(http://www.studiopastimes.info/tester/images/frame.svg);
background-repeat: no-repeat;
z-index: 1000;
padding: 3rem;
box-sizing: border-box;
}
.internal-frame {
position: relative;
width: 400px;
z-index:-5;
}
.internal-frame img {
width: 100%;
}
However, when I add the animation code, this breaks the z-index.
#-webkit-keyframes swinging{
0%{-webkit-transform: rotate(10deg);}
33%{-webkit-transform: rotate(-5deg);}
66%{-webkit-transform: rotate(10deg);}
100%{-webkit-transform: rotate(-5deg);}
}
#keyframes swinging{
0%{-webkit-transform: rotate(10deg);}
33%{-webkit-transform: rotate(-5deg);}
66%{-webkit-transform: rotate(10deg);}
100%{-webkit-transform: rotate(-5deg);}
}
.swingimage{
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 5s ease-in-out ;
animation: swinging 5s ease-in-out ;
animation-fill-mode: forwards;
backface-visibility: hidden;
}
This can all be seen in the Codepen here: https://codepen.io/anon/pen/RMrrWB
Any idea how I can get the CSS animation to work, whist still having the frame above the image? I understand from my research there issues with CSS animations and z-index, but I couldn't get any of the suggested fixes to work. Any help would be great and if there's any issues with how I have asked this question please let me know!
Thanks

Answer 1

I'd put the frame on a pseudo-element:
.frame {
margin-top: 5rem;
margin-left: 35%;
box-sizing: border-box;
width: 400px;
padding-top: 69.25%; /* this is the aspect ratio of the image: height / width */
position: relative;
}
.frame:after {
content:'';
display:block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url(http://www.studiopastimes.info/tester/images/frame.svg);
background-repeat: no-repeat;
padding: 20px;
}
img {
position: absolute;
top: 20px; /* match the padding */
left: 0;
width: 100%;
z-index: 1;
}
#-webkit-keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
}
33% {
-webkit-transform: rotate(-5deg);
}
66% {
-webkit-transform: rotate(10deg);
}
100% {
-webkit-transform: rotate(-5deg);
}
}
#keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
}
33% {
-webkit-transform: rotate(-5deg);
}
66% {
-webkit-transform: rotate(10deg);
}
100% {
-webkit-transform: rotate(-5deg);
}
}
.swingimage {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 5s ease-in-out;
animation: swinging 5s ease-in-out;
animation-fill-mode: both;
backface-visibility: hidden;
}
<div class="frame swingimage">
<img src="http://www.studiopastimes.info/tester/images/cabaret.jpg" class="img">
</div>

Answer 2

The z-index property needs the element to have a set position. then if you just add position: relative; to your .frame it'll make the job.
full css :
.frame {
margin-top: 5rem;
margin-left: 35%;
display: inline-flex;
position: relative;
background-image: url(http://www.studiopastimes.info/tester/images/frame.svg);
background-repeat: no-repeat;
position: relative
z-index: 10;
padding: 3rem;
box-sizing: border-box;
/* height: 10rem;
width: 20rem;*/
}
.internal-frame {
position: relative;
width: 400px;
z-index:-5;
}
.internal-frame img {
width: 100%;
z-index:-5;
}
#-webkit-keyframes swinging{
0%{-webkit-transform: rotate(10deg);}
33%{-webkit-transform: rotate(-5deg);}
66%{-webkit-transform: rotate(10deg);}
100%{-webkit-transform: rotate(-5deg);}
}
#keyframes swinging{
0%{-webkit-transform: rotate(10deg);}
33%{-webkit-transform: rotate(-5deg);}
66%{-webkit-transform: rotate(10deg);}
100%{-webkit-transform: rotate(-5deg);}
}
.swingimage{
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 5s ease-in-out ;
animation: swinging 5s ease-in-out ;
animation-fill-mode: both;
backface-visibility: hidden;
}
with your html :
<!DOCTYPE html>
<html>
<head>
<title>FRAME TESTER</title>
</head>
<body>
<div class="frame">
<div class="internal-frame">
<img src="http://www.studiopastimes.info/tester/images/cabaret.jpg">
</div>
</div>
</body>
</html>