CSS анимация конфликтует с! Важно в Google Chrome - PullRequest
Новая
       2

CSS анимация конфликтует с! Важно в Google Chrome

0 голосов
/ 04 декабря 2018

Я создал слайдер изображений с CSS-анимацией, синхронно меняя поле кнопки и изображения Снимок экрана из Firefox

HTML-код выглядит следующим образом 

<p class="slidercontrol">
 <span class="btn-border"><span id="btn-1" class="btn-tab slide_1"> 1 </span></span>
 <span class="btn-border"><span id="btn-2" class="btn-tab slide_2"> 2 </span></span>
 <span class="btn-border"><span id="btn-3" class="btn-tab slide_3"> 3 </span></span>
 <span class="btn-border"><span id="btn-4" class="btn-tab slide_4"> 4 </span></span>
 <span class="btn-border"><span id="btn-5" class="btn-tab slide_5"> 5 </span></span>
        </p>
<figure class="slidercss">
 <img id="img-1" class="slider_img slide_1" src="slider/hotel/slider-1.jpg" alt="">
 <img id="img-2" class="slider_img slide_2" src="slider/hotel/slider-2.jpg" alt="">
 <img id="img-3" class="slider_img slide_3" src="slider/hotel/slider-3.jpg" alt="">
 <img id="img-4" class="slider_img slide_4" src="slider/hotel/slider-5.jpg" alt="">
 <img id="img-5" class="slider_img slide_5" src="slider/hotel/slider-7.jpg" alt="">
</figure>

Для анимации я ввел один @keyframe для каждой пары кнопка / изображение, изменяя параметры для обоих элементов одновременно: 

.slide_1 {animation: imgslide-1 infinite 15000ms;}
.slide_2 {...}
@keyframes imgslide-1 {
             0% {opacity: 1; background-color: #ff7d00; color: white;}
            15% {opacity: 1; background-color: #ff7d00; color: white;}
            25% {opacity: 0; background-color: #ffffff; color: #333333;}
           100% {opacity: 0; background-color: #ffffff; color: #333333;}
}
@keyframe imgslide-2 {....

В ключевом кадре непрозрачность должна измениться для изображения иbackground-color и атрибут цвета для кнопки.Чтобы всегда отображать содержимое кнопки, для всех кнопок устанавливается непрозрачность 1 со значением важный: 

.btn-tab {opacity: 1 !important;}

Firefox делает это очень хорошо, принимает атрибут «! Important» и всегда показывает кнопку, независимо от изменениянепрозрачности в ключевом кадре.Но Chrome 70 предпочитает оператор непрозрачности из ключевого кадра и игнорирует оператор «Важно», поэтому содержимое кнопки исчезает, как на изображении.Это ошибка или особенность, или я что-то сделал не так?

Вот страница с моей проблемой: https://www.proaspecto.com/de/webdesign-referenzen/fallstudie-hotel-website.html

Кто-нибудь может помочь?

...