CSS3 动画启动太快答案

【问题标题】：CSS3 animation starts too fastCSS3 动画启动太快
【发布时间】：2016-01-20 18:41:21
【问题描述】：

我让 3 个 div 相互淡入淡出，每个持续 7 秒，所以总共 21 秒。

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

进入网站后，第一个 div 会在不到 7 秒的时间内快速移动，当那个 div 淡出时，一切正常，这给我在尝试与该 div 一起为其他东西设置动画时遇到了一些问题。就像前端开发人员 '' svg 看起来不正确，下面的计时器圈落后了 3.5 秒。

如何让动画以 7 秒计时器开始？

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

代码笔：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>

【问题讨论】：

stackoverflow.com/help/mcve
制作了一个密码笔！对此感到抱歉
不相信 codepen 符合“最小”的条件。也请直接在您的问题中发布代码的相关部分。
另外，您到底想得到什么，得到的与您想要的有何不同？从你的问题看不太清楚。
为什么你的delays 是负面的？这将导致您的动画在中途开始。

标签： html css animation

【解决方案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;}

【讨论】：

谢谢！我修好了，或者更确切地说——你修好了！这太愚蠢了，我自己也弄不明白，但是谢谢！

【解决方案2】：

我会在 CSS 中使用延迟属性：

animation-delay: 2s;

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

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

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

【讨论】：