css3動畫暫停在屏幕中間

Question

基本上這是一個球。 這個球從左到右。 我希望球在屏幕中間到達時暫停，3秒後它應該淡出 我該怎麼做？

div.new-goal { 
    position:absolute; 
    margin-top: 30px; 
    background-color: transparent; 
    text-align:center; 
    -webkit-animation: movein 1.0s ease-out 0s 1, moveout 2.1s ease-in 1s 1; 
    -webkit-animation-fill-mode: forwards; 
    white-space: nowrap; 
    color: $green2; 
} 

PS：這是上海社會科學院

Answer 1

HTML

<div id="ball"></div> 

CSS

body { 
    margin: 0; 
    padding: 0; 
} 

#ball { 
    width: 50px; 
    height: 50px; 
    background: green; 
    border-radius: 50%; 
    position: absolute; 
    left: -50px; 
    -webkit-animation: move 8s; 
    -webkit-animation-fill-mode: forwards; 
} 

@-webkit-keyframes move 
{ /* 
    8s : 100% = 3s : x 
    x = 37.5% 
    */ 
    37.5% { 
     left: calc(50% - 25px); opacity: 1; 
    } 
    75% { 
     left: calc(50% - 25px); opacity: 1; 
    } 
    85% { 
     left: 80%; opacity: 0; 
    } 
    100% { 
     opacity: 0; 
    } 
} 

http://jsfiddle.net/8B9Lx/3/