Slick Slider - CSS animation flashes

问题

I'm using a Slick Slider with CSS animations to make a smooth visual effect, everything works fine but the current slide flashes for a sec at the end of the animation. See the undesired effect in the Snippet.

What is causing this? there's a probably solution for this kind of customized animations?

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

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

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

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

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

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

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

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

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

@keyframes anim-link{
    5% {opacity: 0;}
	20% {opacity: 1;}
	90% {opacity: 1;}
	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>

Your help is really appreciated!

回答1:

You need 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 {
	font-family: Arial, sans-serif;
	font-size: 72px;
	line-height: 100%;
	color: #BC9E6C;
	opacity: 0;
}

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

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

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

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

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

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

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

@keyframes anim-link{
    5% {opacity: 0;}
	20% {opacity: 1;}
	90% {opacity: 1;}
	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>

来源：https://stackoverflow.com/questions/37424378/slick-slider-css-animation-flashes