@ -webkit-ключевые кадры конфликтуют с другими - PullRequest
Новая
       7

@ -webkit-ключевые кадры конфликтуют с другими

0 голосов
/ 26 сентября 2018

У меня есть эффект анимации ключевого кадра на 2 баннерах на моей домашней странице.Я определил для каждого баннера свой класс, чтобы я мог выбрать разную скорость для каждой анимации.HTML выглядит так:

HTML 

<div class="subpage-image-sca">
        <span class="subpage-image ken-burns-container">
            <img src="http://staging.morningsidepharm.com/wp/wp-content/uploads/2018/09/Header-Image-homepage-compressor.jpg" class="ken-burns-image">
        </span>
</div>


<div class="subpage-image-sca">
        <span class="subpage-image ken-burns-container-20">
            <img src="http://staging.morningsidepharm.com/wp/wp-content/uploads/2018/09/Header-Image-homepage-compressor.jpg" class="ken-burns-image-20">
        </span>
</div>

Код CSS выглядит следующим образом:

CSS 

/* ------------ Ken Burns 10 Secs ------------- */

.ken-burns-container {
  overflow: hidden;
}

.ken-burns-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-clip: border-box;
  animation: 10s ease-in 0s 1 scaleout;
  -webkit-animation: 10s ease-in 0s 1 scaleout;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes scaleout {
  0% { transform: scale(1); }
   100% {transform: scale(20); 
    }
  }



/* ------------ Ken Burns 20 Secs ------------- */

.ken-burns-container-20 {
  overflow: hidden;
}

.ken-burns-image-20 {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-clip: border-box;
  animation: 20s ease-in 0s 1 scaleout;
  -webkit-animation: 20s ease-in 0s 1 scaleout;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes scaleout {
  0% { transform: scale(1); }
   100% {transform: scale(1.17); 
    }
  }

Вот скрипка JS: https://jsfiddle.net/shan_2000_uk/yhf4dzrx/10/

Оба эти бита CSS работают нормально самостоятельно.Кажется, что существует конфликт с последним блоком кода, который определяет масштаб: 

@-webkit-keyframes scaleout {
  0% { transform: scale(1); }
   100% {transform: scale(20); 
    }
  }

Если я удаляю этот блок из одного из разделов, другой работает нормально.

Я пытался добавить класс в этот блок, например: 

.ken-burns-container-20 @-webkit-keyframes scaleout {
  0% { transform: scale(1); }
   100% {transform: scale(1.17); 
    }
  }

Но, похоже, это не сработало.

Кто-нибудь знает, A: Почемукод конфликтует, и B: способ использовать оба бита кода без конфликта?

Большое спасибо, что нашли время посмотреть!

1 Ответ

0 голосов
/ 26 сентября 2018

Вы просто переопределяете первое правило @keyframe с последним, вам, вероятно, нужно присвоить им разные имена, давайте scaleout1 для первых @keyframe и scaleout2 за последние @keyframe.

Вот демо:

.ken-burns-container, .ken-burns-container-20 {
  overflow: hidden;
}
.ken-burns-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-clip: border-box;
  animation: scaleout1 10s ease-in;
  animation-fill-mode: forwards;
}
.ken-burns-image-20 {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-clip: border-box;
  animation: scaleout2 20s ease-in;
  animation-fill-mode: forwards;
}

/* keyframes */
@keyframes scaleout1 {
  0% { transform: scale(1); }
  100% { transform: scale(20); }
}
@keyframes scaleout2 {
  0% { transform: scale(1); }
  100% { transform: scale(1.17); }
}
<div class="subpage-image-sca">
    <span class="subpage-image ken-burns-container">
        <img src="https://via.placeholder.com/300x300" class="ken-burns-image">
    </span>
</div>
<div class="subpage-image-sca">
    <span class="subpage-image ken-burns-container-20">
        <img src="https://via.placeholder.com/500x500" class="ken-burns-image-20">
    </span>
</div>

Надеюсь, я подтолкнул вас дальше.

...