시퀀스의 각 줄에 대한 CSS 기반 타이핑 애니메이션 만들기

Question

아아아아 으아아아

내가 원하는 것은 여기에 입력 애니메이션을 사용하여 위에서 아래로 한 줄씩 텍스트를 사용자에게 표시하는 것입니다. 여러 가지 방법을 시도했지만 각 p.text 元素定义不同的 keyframe 之外，我找不到其他解决方案。这样我的代码就变成了意大利面条，因为有 17 个 p.text 요소를 제외하고는 아무것도 시도하지 않았습니다. 나는 무엇을 해야 합니까?

이 질문에 대한 codepen 링크는 다음과 같습니다: https://codepen.io/mehmetguduk/pen/RwJqzpN

Answer 1

각 행에 수동으로 지연을 적용해야 합니다. SCSS의 경우 이를 수행하는 예제 코드 조각은 @for 루프를 사용한 다음 인덱스에 애니메이션 지속 시간을 곱하는 것입니다.

으아악

물론 완벽한 타이밍을 얻으려면 약간의 추가 조정이 필요하지만 이 문제를 해결하는 방법에 대한 대략적인 아이디어를 제공해야 합니다.

애니메이션 상태도 both로 설정되어 텍스트가 처음에는 숨겨지고 애니메이션이 끝난 후에도 계속 표시되는지 확인하세요.

편집자:

JavaScript를 사용하여 다음과 같이 애니메이션 지연을 설정할 수도 있습니다.

으아악