Slick Slider - CSS Animation blinkt

Question

Ich verwende einen Slick Slider mit CSS Animationen, um einen reibungslosen visuellen Effekt zu erzielen, alles funktioniert gut, aber die aktuelle Folie blinkt für eine Sekunde am Ende der Animation. Sehen Sie sich den unerwünschten Effekt im Snippet an.

Was verursacht das? Gibt es eine Lösung für diese Art von benutzerdefinierten Animationen?

$(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>

Ihre Hilfe ist willkommen wirklich!

Answer 1

Sie benötigen 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>