CSSアニメーションのループに遅延を追加する

Question

CSSアニメーションを再起動する前に少し時間がかかることがありましたが、まだ結果が得られませんでした（how make a looped animation wait using css3とCSS Animation Delay in Between Loop）。

私はCSSの新人です。あなたに私にいくつかの指針を示唆してくれることを願っています。次

が

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

Answer 1

は、アニメーションのこの構文としてそれを試してみてください（私のウェブサイトのために、あなたがhttp://iwaterhealth.com/に行く場合があります）一部のCSSコードである

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