在 CSS 动画中为循环添加延迟答案

【问题标题】：Adding Delay to looping in CSS animation在 CSS 动画中为循环添加延迟
【发布时间】：2016-09-20 20:21:27
【问题描述】：

我一直在尝试（how make a looped animation wait using css3 和 CSS Animation Delay in Between Loop）在我的 css 动画重新启动之前有一些延迟，但没有任何结果。

我是 CSS 新手，希望您能给我一些建议。

以下是一些CSS代码（我的网站可以去http://iwaterhealth.com/）

i {
    font-style: normal;
    padding: 0 0.25em;
    -webkit-transform: scale(0) translate3d(0, -2000px, 0);
       -moz-transform: scale(0) translate3d(0, -2000px, 0);
        -ms-transform: scale(0) translate3d(0, -2000px, 0);
         -o-transform: scale(0) translate3d(0, -2000px, 0);
            transform: scale(0) translate3d(0, -2000px, 0);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}
i.fly-in-out {
    -webkit-animation: fly-in-out 3s infinite ease-in-out 4s;
       -moz-animation: fly-in-out 3s infinite ease-in-out 4s;
         -o-animation: fly-in-out 3s infinite ease-in-out 4s;
            animation: fly-in-out 3s infinite ease-in-out 4s;
}


@keyframes fly-in-out {
    0% {
        transform: scale(0) translate3d(0, -2000px, 0);
        background: rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
        border-radius: 50%;
    }
    15%, 85% {
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        transform: scale(1) translate3d(0, 0, 0);
        background: transparent;
        box-shadow: none;
    }
    100% {
        color: transparent; 
        transform: scale(0) translate3d(0, 2000px, 0);
        background: rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
        border-radius: 50%;
    }
}

【问题讨论】：

你在哪里指定animation-delay？我猜这是基本的。
“4s”是延迟。我看到人们使用这个速记动画属性。这不正确吗？
我不喜欢用那个简写来表示延迟，因为有两个相似的值（我不知道浏览器如何区分同一句话中的 3s 和 4s）。我更喜欢没有延迟的速记，然后添加带有前缀的animation-delay。

标签： css animation

【解决方案1】：

试试这个动画语法

i {
        font-style: normal;
        padding: 0 0.25em;
        -webkit-transform: scale(0) translate3d(0, -2000px, 0);
           -moz-transform: scale(0) translate3d(0, -2000px, 0);
            -ms-transform: scale(0) translate3d(0, -2000px, 0);
             -o-transform: scale(0) translate3d(0, -2000px, 0);
                transform: scale(0) translate3d(0, -2000px, 0);
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
    }
    i.fly-in-out {
        -webkit-animation: fly-in-out 3s ease-in-out 8s infinite;
           -moz-animation: fly-in-out 3s ease-in-out 8s infinite;
             -o-animation: fly-in-out 3s ease-in-out 8s infinite;
                animation: fly-in-out 3s ease-in-out 8s infinite;
    }


    @keyframes fly-in-out {
        0% {
            transform: scale(0) translate3d(0, -2000px, 0);
            background: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
            border-radius: 50%;
        }
        15%, 85% {
            color: rgba(255, 255, 255, 0.8);
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
            transform: scale(1) translate3d(0, 0, 0);
            background: transparent;
            box-shadow: none;
        }
        100% {
            color: transparent; 
            transform: scale(0) translate3d(0, 2000px, 0);
            background: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
            border-radius: 50%;
        }
    }

【讨论】：

我按照建议进行了修改。但是，它仍然不会在每次效果迭代后暂停。（你可以访问iwaterhealth.com看看效果。我想要实现的是让文本动画暂停一段时间，然后再次开始出现）
我尝试修改 chrome F12 中的 css 为“动画：飞入飞出 8s 无限缓入；”效果很像我想要的。