在循环CSS之间停止动画

Question

我有这个代码，我想在循环之间停止动画，持续5秒， 我用谷歌搜索，发现只是旋转（没有延迟）

＆＃13;

＆＃13;

.line-1{
    border-left: 2px solid rgba(255,255,255,.75);
    white-space: nowrap;
    overflow: hidden;
	direction:ltr;
}

/* Animation */
.anim-typewriter{
	animation: typewriter 4s steps(44) 1s infinite normal both,
				blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
	from{width: 0;}
	to{width: 24em;}
}
@keyframes blinkTextCursor{
	from{border-left-color: rgba(255,255,255,.75);}
	to{border-left-color: transparent;}
}

＆＃13;

<p class="line-1 anim-typewriter" style="margin-left:auto;margin-right:auto;">Good News: You Won :)<a href="Awards/"> Get Award </a></p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

.line-1{
    border-left: 2px solid rgba(255,255,255,.75);
    white-space: nowrap;
    overflow: hidden;
	direction:ltr;
}

/* Animation */
.anim-typewriter{
	animation: typewriter 4s steps(44) 1s 2 normal both,
				blinkTextCursor 500ms steps(44) 2 normal;
}
@keyframes typewriter{
	from{width: 0;}
	to{width: 24em;}
}
@keyframes blinkTextCursor{
	from{border-left-color: rgba(255,255,255,.75);}
	to{border-left-color: transparent;}
}

＆＃13;

<p class="line-1 anim-typewriter" style="margin-left:auto;margin-right:auto;">Good News: You Won :)<a href="Awards/"> Get Award </a></p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在关键帧动画中添加与上一步相同的另一个步骤：

＆＃13;

＆＃13;

.line-1 {
  border-left: 2px solid rgba(255, 255, 255, .75);
  white-space: nowrap;
  overflow: hidden;
  direction: ltr;
}


/* Animation */

.anim-typewriter {        
  animation: typewriter 8s /* increase to 8s so you have 4s pause */ steps(44) 1s infinite normal both, blinkTextCursor 500ms steps(44) infinite normal;
}

@keyframes typewriter {
  0% {
    width: 0;
  }
  50% {
    width: 24em;
  }
  100% {  /* 50% of this animation is now a pause */
    width: 24em;
  }
}

@keyframes blinkTextCursor {
  from {
    border-left-color: rgba(255, 255, 255, .75);
  }
  to {
    border-left-color: transparent;
  }
}

＆＃13;

<p class="line-1 anim-typewriter" style="margin-left:auto;margin-right:auto;">Good News: You Won :)<a href="Awards/"> Get Award </a></p>

＆＃13;

＆＃13;

＆＃13;