Проблемы с z-index при анимации CSS

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, но я не смог заставить работать ни одно из предложенных исправлений. Любая помощь была бы замечательной, и если есть какие-либо проблемы с тем, как я задал этот вопрос, пожалуйста, дайте мне знать!

Благодарность

html css css-animations

3

practical 13 Мар 2018 в 19:07

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>

2

Pete 13 Мар 2018 в 16:27

Answer 2

Свойству z-index необходимо, чтобы элемент имел заданную позицию. тогда, если вы просто добавите position: relative; в свой .frame, он будет работать.

Полный 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>

0

kevinniel 13 Мар 2018 в 16:10

Проблемы с z-index при анимации CSS

2 ответа

Похожие вопросы

Новые вопросы

html