CSS의 입력 애니메이션이 지정된 제한을 초과합니다.

Question

타이핑 애니메이션은 매번 설정된 문자 수에 따라 중지됩니다. 명령문을 확장하면 중단됩니다. 문을 짧게 하면 설정된 문자 수에 도달할 때까지 계속됩니다. 단계 수(50)를 변경해야 한다는 것을 알고 있지만 실제로는 그 숫자가 아니라 28에서 멈춥니다.

으아아아 으아아아

Answer 1

여기에서 너비 매개변수를 줄여 키프레임이 끝나는 위치를 조정할 수 있습니다.

으아아아

너비를 13em으로 변경하면 문자열 끝에서 커서가 깜박입니다.

으아아아 으아아아

가장 간단한 방법이지만 나중에 문자열 크기를 동적으로 조정하는 경우 문자열 길이(문자 수)를 기준으로 너비를 업데이트해야 합니다.