Slick Slider - CSS 动画闪烁

Question

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

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

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

非常感谢您的帮助！

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

Slick Slider - CSS 动画闪烁

Slick Slider - CSS animation flashes

html

css

jquery

slick.js