CSS动画中的z-index问题

Question

第一次在这里发布帖子，长期以来我一直将该网站作为解决任何问题的资源，但是这是我第一次无法使用以前的答案修复我的代码。

我试图创建一个片段，可以在不久的将来用于生产网站。我想创建一个围绕图片的图像“框架”。然后，我还希望使此框架动画化，并从一侧摇摆。

在我插入动画代码之前，以下代码如下，并且完美地工作（框架在图像上方）。

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

然而，当我加入动画代码时，这会破坏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;
}

这可以在Codepen中查看：https://codepen.io/anon/pen/RMrrWB 请问有什么办法可以让CSS动画在图像上面的帧仍然存在？我从我的研究中了解到CSS动画和z-index存在问题，但我无法使任何建议的修复措施生效。如果有任何帮助，那将是太好了。如果我的问题有任何问题，请告诉我！

谢谢。

- practical

---

你只是想把图片移到框架后面吗？https://jsfiddle.net/jd2j3qLe/1/ - Pete

嗨，皮特。不，照片和相框应该一起摆动，就像真正的相框里的图片一样。 - practical

Answer 1

我会将框架放在一个伪元素上：

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

- Pete

Answer 2

z-index属性需要元素设置位置。如果您只是在.frame中添加position: relative;，它就可以完成工作。

完整的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;
}

使用您的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>

- kevinniel

---

嗨，我之前尝试过这个，但它没有起作用。在这里查看codepen：https://codepen.io/anon/pen/RMrrWB - practical