Slick Slider - вспышка анимации CSS

Question

Я использую Slick Slider с анимацией CSS, чтобы сделать гладкий визуальный эффект, все работает отлично, но текущий слайд мигает в течение секунды в конце анимации. См. Нежелательный эффект в фрагменте.

Что вызывает это? возможно ли решение для такого рода анимаций?

$(document).ready(function(){ 
 
    $('.index-slider').slick({ 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    infinite: true, 
 
    arrows: false, 
 
    fade: true, 
 
    autoplay: true, 
 
    autoplaySpeed: 8000 
 
    }); 
 
});

.index-header { 
 
\t font-family: Arial, sans-serif; 
 
\t font-size: 72px; 
 
\t line-height: 100%; 
 
\t color: #BC9E6C; 
 
\t opacity: 0; 
 
} 
 

 
.index-label { 
 
\t font-family: Arial, sans-serif; 
 
\t font-size: 24px; 
 
\t padding: 2rem 0; 
 
\t opacity: 0; 
 
} 
 

 
.index-link { 
 
\t font-family: Arial, sans-serif; 
 
\t color: #BC9E6C; 
 
\t opacity: 0; 
 
} 
 

 
.slick-active .index-header { 
 
    animation: anim-header 8s 0s ease; 
 
\t opacity: 1; 
 
} 
 

 
.slick-active .index-label { 
 
    animation: anim-label 8s 0s ease; 
 
\t opacity: 1; 
 
} 
 

 
.slick-active .index-link { 
 
    animation: anim-link 8s 0s ease; 
 
\t opacity: 1; 
 
} 
 

 
@keyframes anim-header{ 
 
    0% {opacity: 0; margin-top: -25px;} 
 
\t 10% {opacity: 1; margin-top: 0px;} 
 
\t 90% {opacity: 1;} 
 
\t 100% {opacity: 0;} 
 
} 
 

 
@keyframes anim-label{ 
 
    5% {opacity: 0; padding: 0 0;} 
 
\t 20% {opacity: 1; padding: 2rem 0;} 
 
\t 90% {opacity: 1;} 
 
\t 100% {opacity: 0;} 
 
} 
 

 
@keyframes anim-link{ 
 
    5% {opacity: 0;} 
 
\t 20% {opacity: 1;} 
 
\t 90% {opacity: 1;} 
 
\t 100% {opacity: 0;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js' type='text/javascript'></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" /> 
 

 
<div class="index-slider"> 
 
    <div> 
 
    <h1 class="index-header">Slide Nº1</h1> 
 
    <h5 class="index-label">Lorem ipsum dolor sit amet, dilige et quod vis fac, cogito ergo sum, vi veri veniversum vivus vici.</h5> 
 
    <span class="index-link">Lorem ipsum</span> 
 
    </div> 
 
    <div> 
 
    <h1 class="index-header">Slide Nº2</h1> 
 
    <h5 class="index-label">Lorem ipsum dolor sit amet, dilige et quod vis fac, cogito ergo sum, vi veri veniversum vivus vici.</h5> 
 
    <span class="index-link">Lorem ipsum</span> 
 
    </div> 
 
</div>

Ваша помощь очень ценится!

Answer 1

Вам нужно animation-fill-mode: forwards;

$(document).ready(function(){ 
 
    $('.index-slider').slick({ 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    infinite: true, 
 
    arrows: false, 
 
    fade: true, 
 
    autoplay: true, 
 
    autoplaySpeed: 8000 
 
    }); 
 
});

.index-header { 
 
\t font-family: Arial, sans-serif; 
 
\t font-size: 72px; 
 
\t line-height: 100%; 
 
\t color: #BC9E6C; 
 
\t opacity: 0; 
 
} 
 

 
.index-label { 
 
\t font-family: Arial, sans-serif; 
 
\t font-size: 24px; 
 
\t padding: 2rem 0; 
 
\t opacity: 0; 
 
} 
 

 
.index-link { 
 
\t font-family: Arial, sans-serif; 
 
\t color: #BC9E6C; 
 
\t opacity: 0; 
 
} 
 

 
.slick-active .index-header { 
 
    animation: anim-header 8s 0s ease; 
 
    animation-fill-mode: forwards; 
 
\t opacity: 1; 
 
} 
 

 
.slick-active .index-label { 
 
    animation: anim-label 8s 0s ease; 
 
    animation-fill-mode: forwards; 
 
\t opacity: 1; 
 
} 
 

 
.slick-active .index-link { 
 
    animation: anim-link 8s 0s ease; 
 
    animation-fill-mode: forwards; 
 
\t opacity: 1; 
 
} 
 

 
@keyframes anim-header{ 
 
    0% {opacity: 0; margin-top: -25px;} 
 
\t 10% {opacity: 1; margin-top: 0px;} 
 
\t 90% {opacity: 1;} 
 
\t 100% {opacity: 0;} 
 
} 
 

 
@keyframes anim-label{ 
 
    5% {opacity: 0; padding: 0 0;} 
 
\t 20% {opacity: 1; padding: 2rem 0;} 
 
\t 90% {opacity: 1;} 
 
\t 100% {opacity: 0;} 
 
} 
 

 
@keyframes anim-link{ 
 
    5% {opacity: 0;} 
 
\t 20% {opacity: 1;} 
 
\t 90% {opacity: 1;} 
 
\t 100% {opacity: 0;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js' type='text/javascript'></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" /> 
 

 
<div class="index-slider"> 
 
    <div> 
 
    <h1 class="index-header">Slide Nº1</h1> 
 
    <h5 class="index-label">Lorem ipsum dolor sit amet, dilige et quod vis fac, cogito ergo sum, vi veri veniversum vivus vici.</h5> 
 
    <span class="index-link">Lorem ipsum</span> 
 
    </div> 
 
    <div> 
 
    <h1 class="index-header">Slide Nº2</h1> 
 
    <h5 class="index-label">Lorem ipsum dolor sit amet, dilige et quod vis fac, cogito ergo sum, vi veri veniversum vivus vici.</h5> 
 
    <span class="index-link">Lorem ipsum</span> 
 
    </div> 
 
</div>