[css] 타이핑 애니메이션효과

.search_bottom .placeholder {
  color: #D71921;
  font-weight:bold;
  position:relative;
  bottom: -8px;
  overflow: hidden;
  max-width: 230px;
  height: 20px;
  border-right:4px solid #fff; /*커서*/
  animation:  typing 10s steps(40) infinite, /* 타이핑 속도 조절*/
             blink-caret .8s step-end infinite;
  animation-iteration-count: infinite
 
}
@keyframes cursor{
  50%{ border-color: transparent; }
}
@keyframes typing{
  0% {
    width: 0%;
  }
  30% {
    width: 100%;
  }
  80% {
    width: 100%;
  }
  90% {
    width: 0%;
  }
  100% {
    width: 0%;
  }
}

PropertyDescription

@keyframes 애니메이션 코드를 작성하는 곳
animation 모든 애니메이션 속성을 간결하게 적는 곳
animation-delay 애니메이션의 시작을 지연시킵니다.(ms, s)
animation-direction 애니메이션이 앞으로향할지, 뒤로 향할지, 번갈아 오는지 정합니다.
animation-duration 애니메이션이 한 사이클을 도는 시간을 설정합니다.
animation-fill-mode 애니메이션이 시작하기 전이든, 후든 작동중이 아닐 때의 스타일을 정합니다.
animation-iteration-count 몇번 재생할지 정합니다.
animation-name 키프레임의 이름을 특정합니다.
animation-play-state 애니메이션이 작동할지 안할지 정합니다.
animation-timing-function 움직이는 방식을 설정합니다.

참조: https://emessell.tistory.com/167