Question

我让3个div逐渐淡入，每个持续7秒，总共21秒。

div 2的延迟为-7s，div3的延迟为-14s。

进入网站后，第一个div会在不到7秒的时间内进行掠夺，当一个褪色时，一切都会按照它应该的方式运行，这会让我在尝试使用该div动画其他内容时遇到一些问题。就像前端开发者一样，＆＃39;＆＃39; svg看起来不正常，下面的计时器圈落后3.5秒。

如何让动画像7s计时器一样开始？

编辑：编写了一个编写代码;显然它从第三个div开始，然后从div 1开始。您可以看到它持续几秒钟，然后它移动到div 1，从那时起每个div都有7秒的延迟。它只是第一次失败。

Codepen：https://codepen.io/anon/pen/MKOGJZ

CSS

.fade-in{
    opacity:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 21s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 21s;
}

.fade-in-2{
    opacity:0;
    -webkit-animation-name: fade2;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 21s;
    animation-name: fade2;
    animation-iteration-count: infinite;
    animation-duration: 21s;
}

.fade-in-3{
    opacity:1;
    -webkit-animation-name: fade3;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 21s;
    animation-name: fade3;
    animation-iteration-count: infinite;
    animation-duration: 21s;
}

.fade-in-2 img, .fade-in-2 svg{
    margin-top:-8em;
    max-width:100%;
    height:auto;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    17% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    47% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    17% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    47% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes fade2 {
    0% {opacity: 0;}
    15% {opacity: 0;}
    17% {opacity: 1;}
    33% {opacity: 1;}
    45% {opacity: 1;}
    48% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes fade2 {
   0% {opacity: 0;}
    15% {opacity: 0;}
    17% {opacity: 1;}
    33% {opacity: 1;}
    45% {opacity: 1;}
    48% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 .fade-in {
}
#f2 .fade-in, #f2 .fade-in-2{
    -webkit-animation-delay: -14s;
}
#f3 .fade-in, #f3 .fade-in-2{
    -webkit-animation-delay: -7s;
}

.frontend-left, .frontend-right, .frontend-dash{
    stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 7s cubic-bezier(.1, .85, .15, .5) infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.timeline{
      stroke-dasharray: 607;
      stroke-dashoffset: 607;
  animation: dash3 21s linear infinite;
}

@keyframes dash3 {
  to {
    stroke-dashoffset: 0;
  }
}

HTML

<div class="content-container service-wrapper">
    <div id="f1" class="service-section">
        <div class="col eentweede fade-in">
            <h2>Div 1</h2>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet             rutrum faucibus dolor auctor.</p>
        </div>       
        <div class="col eentweede img-here fade-in-2">
        </div>
    </div>
    <div id="f2" class="service-section">
        <div class="col eentweede fade-in">
            <h2>Div 2</h2>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        </div>
        <div class="col eentweede img-here fade-in-2">
        </div>
        </div>
    <div id="f3" class="service-section">
        <div class="col eentweede fade-in" style="text-align:right;">
            <h2>Div 3</h2>
            <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. 
            </p>
        </div>
        <div class="col eentweede img-here fade-in-2">
        </div>
    </div>
</div>

Answer 1

问题在于您的关键帧百分比。你只是观看动画的总持续时间的20％左右，剩下的时间它的不透明度为0.调整这些并使你的延迟为正，你应该看到更好的结果。

尝试使用关键帧：

0% {opacity: 0;}
17% {opacity: 1;}
20% {opacity: 1;}
33% {opacity: 1;}
47% {opacity: 1;}
50% {opacity: 1;}
98% {opacity: 1}
100% {opacity: 0;}

Answer 2

我会在CSS中使用delay属性：

animation-delay: 2s;

您可以查看有关动画延迟的更多信息

http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

这样你就不需要这么多的关键帧，你可以将它延迟到你想要的时间。

CSS3动画启动太快了

Codepen：https://codepen.io/anon/pen/MKOGJZ

CSS

HTML

2 个答案: