在CSS动画中添加延迟到循环

我一直试图（how make a looped animation wait using css3和CSS Animation Delay in Between Loop）在我的css动画重新启动之前有一些延迟，但尚未得到任何结果。在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%; 
    } 
}

来源

2016-09-19 user1984132

你在哪里指定'动画delay' ？我猜这是基本的。 –

“4s”是延迟。我看到使用这种速记动画属性的人。那是不正确的？ – user1984132

我不喜欢使用这种简写来延迟，因为有两个相似的值（我不知道浏览器如何区分同一句中的3s和4s）。我更喜欢没有延迟的简写，然后添加带有前缀的“animation-delay”。 –

尝试，因为这句法动画

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

来源

2016-09-19 15:39:58

我修改建议。但是，它在每次迭代效果后仍然不会暂停。（你可以访问iwaterhealth.com来看看效果，我想实现的是让文本动画暂停一段时间后再开始出现） – user1984132

我试着用“动画：飞 - 进出8s无限缓出;“效果非常像我想要的。 – user1984132

在CSS动画中添加延迟到循环

回答

相关问题