[css] 글자 높이만큼 줄 변경

@keyframes rolling {
  0% {
  	//margin-top: 0;
    transform: translateY(0);
  }
  25% {
    //margin-top: -1.5em;
    transform: translateY(-20%);
  }
  50% {
    //margin-top: -3em;
    transform: translateY(-40%);
  }
  75% {
    //margin-top: -5.5em;
    transform: translateY(-60%);
  }
  100% {
  	//margin-top: -6em;
    transform: translateY(-80%);
  }
}

.name {
  font-size: 30px;
  line-height: 1; 	// 이때 line-height는 30px 글자 크기 맞큼 한 줄 높이
}

.name-job {
  display: inline-block;
  vertical-align: top;
  height: 1.5em;
  overflow: hidden;
  //box-shadow: inset 0 0 50px #111
  position: relative;
}

.name-job::after {
 content: '!';
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 box-shadow: inset 0 0 10px 10px #111
}

.name-job-list	{
  margin-top: 0	// // line-height를 1로 했기때문에 한 줄 크기를 정확하게 알 수 있다.
  animation-name: rolling;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  //margin-top: -1em
  //margin-top: -2em
}


<div class="name">
  I'm a
	<div class="name-job">
      <ul class="name-job-list">
      	<li>Designer</li>
		<li>Developer</li>
		<li>Creator</li>
		<li>Designer</li>
      </ul>
    </div>
</div>