Использование z-index в css-анимации - PullRequest
Новая
       20

Использование z-index в css-анимации

0 голосов
/ 31 октября 2019

у меня есть анимация here in desktop

To create it the following html was used. 

@media (min-width: 768px) {
  .about5 {
    color: red;
    background-color: blue;
    display: inline-block;
    position: relative;
    font-size: 85px;
    left: 265px;
    font-weight: bolder;
    transform: rotate(0deg);
    bottom: 196px;
    z-index: 3 !important;
    opacity: 0.9;
  }
}

.about5 {
  background-color: blue;
  animation-name: about;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes about {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
    z-index: 2
  }
}

   
}

@keyframes example {
  from {
    top: 5px;
  }
  to {
    top: 80px;
  }
}

@media (min-width: 768px) {
  .about {
    z-index: 5
  }
}
<div class="about">about us text etc</div>
<div class="about5">About</div>

Проблема в том, что about us text отказывается идти перед анимацией, даже несмотря на изменение z-Indez анимации. Как вы можете видеть, about5 div имеет индекс 3, тогда как about имеет z-индекс 5. Это должно привести к отображению текста о нас перед анимацией, но это не так. Поэтому я присвоил анимации z-index, равный 2, чтобы вернуть его назад, но он просто остался впереди.

...