찾다

 >  Q&A  >  본문

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

아아아아 으아아아

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

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

P粉403804844P粉403804844233일 전432

모든 응답(1)나는 대답할 것이다

  • P粉903969231

    P粉9039692312024-04-01 09:34:09

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

    으아악

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

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

    편집자:

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

    으아악

    회신하다
    0
  • 취소회신하다