css3又はjQueryで1秒停止後再びアニメーションが続くようにしたい

以下のように、css3アニメーションで 1.7秒かけてclass="n1"内の画像を1倍～1.5倍に拡大してフェードアウトで消えるようにしています。
これに、停止をいれたいのですがうまくいきません。
class="n1"を1秒停止後、0.7秒かけて「scaleout 」アニメーション（n1内の画像が1倍～1.5倍に拡大する）をしたいのですが、css3または、jQueryでどのようにしたらよいでしょうか。教えてください。

***  html  ***
<li class="n1"><img src="img/01.jpg" alt=""></li>


***  css  ***
.n1 {
    position: absolute;
    width: 320px;
    margin: 0 auto;
    text-align: center;
    background: #ccc;
    bottom: 0;
    z-index: 10;
}

.n1 {
  -webkit-animation: scaleout 1.7s ease-in-out;
  animation: scaleout 1.7s ease-in-out;
}

/* keyframe 始点から終点の設定 */
@-webkit-keyframes scaleout {
  0% {
    -webkit-transform: scale(1.0) 
  }
  50% {
    opacity: 1;
  } 
  100% {
    -webkit-transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }

  50% {
    opacity: 1;
  } 
 100% {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    opacity: 0;
  }
}