Slick Slider - CSS动画闪烁

Question

我使用带有CSS动画的Slick Slider来制作流畅的视觉效果，一切正常，但当前幻灯片在动画结束时闪烁一秒钟。请参阅代码段中的不良效果。

造成这种情况的原因是什么？这种定制动画可能有解决方案吗？

＆＃13;

＆＃13;

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

＆＃13;

.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;}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

非常感谢您的帮助！

Answer 1

您需要animation-fill-mode: forwards;

＆＃13;

＆＃13;

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

＆＃13;

.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;}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;