CSS3动画在下一次迭代之前重复暂停

Question

我有一个页面，图像作为链接淡入淡出并无限重复。我想增加动画迭代之间的时间，暂停，如果你愿意的话。我不希望图像闪烁，但是淡入和淡出然后保持一段时间，然后回来作为提醒。我还希望在页面加载后几秒钟内动画无法启动（即图像在页面加载时不可见）。这只能使用CSS吗？

.click {margin-left: 26%;
  -webkit-animation: clickMe 4.5s ease-in-out 3s infinite; /* Safari 4+ */
  -moz-animation:    clickMe 4.5s ease-in-out 3s infinite;  /* Fx 5+ */
  -o-animation:      clickMe 4.5s ease-in-out 3s infinite;  /* Opera 12+ */
  animation:         clickMe 4.5s ease-in-out 3s infinite;  /* IE 10+, Fx 29+ */}

@-webkit-keyframes clickMe {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }

}
@-moz-keyframes clickMe {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes clickMe {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes clickMe {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}