CSS 애니메이션 타이핑

Question

타이핑하는 것처럼 애니메이션을 만들려고합니다. 이것을 달성하기 위해 CSS 애니메이션 'steps'을 사용하고 있습니다.

애니메이션 자체가 잘 작동합니다. 그러나 여러 줄의 텍스트에 애니메이션을 적용하려는 경우 모두 동시에 재생되기 시작합니다. 나에게 원하는 효과를주지 못한다. 는 (하나의 <h1>에 <br>를 사용하여 시도, 텍스트를 잘라, 그러나 다시 simultaniously 애니메이션을 시작했다. 느릅 나무)

이에 대응하기 위해, 내가 <h2>에 다음의 행의 텍스트를 넣어위한 애니메이션 지연을 설정 모든 텍스트 행. Wich는 작동하지만 애니메이션이 시작되기 전에 텍스트가 표시됩니다.

애니메이션이 재생되기 전까지 텍스트가 숨겨져 실제로 '라이브 타이핑'효과를 얻길 원합니다.
누구나 내가 어떻게이 아이디어를 얻을 수 있습니까?

HTML

<div class="content"> 
    <h1>Hi there! My name is Jeff.</h1> 
    <h2>And I create cool stuff.</h2> 
</div> 

CSS 미리

.content h1 { 
    background:white; 
    opacity:0.7; 
    white-space:nowrap; 
    overflow:hidden; 
    border-right: 3px solid black; 
    -webkit-animation: typing 2s steps(26, end), 
         blink-caret 1s step-end 2s; 
} 
.content h2 { 
    background:white; 
    opacity:0.7; 
    white-space:nowrap; 
    overflow:hidden; 
    border-right: 3px solid black; 
    -webkit-animation: typing 2s steps(26, end), 
         blink-caret 1s step-end infinite; 
    -webkit-animation-delay:3s; 
} 

@-webkit-keyframes typing { 
    from { width: 0; } 
    to { width:400px; } 
} 

@-webkit-keyframes blink-caret { 
    from, to { border-color: transparent } 
    50% { border-color: black } 
} 

jsFiddle

감사합니다.

Answer 1

참조 :

는 다음과 같은 CSS 규칙을 포함

animation-fill-mode:both; 

~ h2 (필수 접두어 사용). 그렇게하면 애니메이션 외부에 너비가 0으로 설정되지 않으므로이 CSS를 지원하지 않는 브라우저는 제목을 표시합니다 (내가 추측 한 것). this fiddle을 참조하십시오.

animation-fill-mode : 그것은이 경우에 both로 설정

을 실행하여 h2이있을 것이라는 점을 의미 한 후

는 CSS 애니메이션 전에 목표에 스타일을 적용하는 방법을 지정하고 너비는 0이고, 실행하기 전에이고, 너비는 400px입니다.

Answer 2

의견에 이미 해결책이 포함되어있을 수 있습니다.이 방법은 시간 제한을 사용하고 처음에 visibility: hidden을 설정하는 다른 방법 일 수 있습니다. 간단히 말해서 방금 jQuery를 사용하여 visiblitiy을 설정했습니다.

.content { 
    visibility: hidden; 
} 

자바 스크립트로 당신이 가진 것 :

window.setTimeout(function() { 
    $('#contentdiv h1').css('visibility', 'visible'); 
}, 100); 

window.setTimeout(function() { 
    $('#contentdiv h2').css('visibility', 'visible'); 
}, 3100); 

은 가장 간단한 솔루션을 추가하는 것입니다 jsFiddle

Answer 3

그렇진 OP의 질문,하지만 경우에 다른 사람이 유용 발견 :

내가 할 수있을 싶었던 pararaph 텍스트의, 포장 할 텍스트를 포함 할 수 있습니다 하나의 <p> 태그를 입력-애니메이션 , 알 수없는 실제 라인을 생성합니다. p 태그 자체에 간단한 선형 애니메이션을 적용하면 효과가 없습니다. 대신 텍스트의 단락을 덮을 수있는 여러 개의 "hider"요소를 사용하는 방식을 취한 다음 각각을 한 줄 높이로 애니메이션을 적용합니다. 그래서 그들은 그 자리에있는 문자의 줄에서 문자를 드러내어 줄 것입니다.

html로는 다음과 같습니다

.container { 
    position: relative; 
    font-family: Consolas, monospace; 
} 
.typing { 
    position: absolute; 
    top: 0; 
    margin: 0; 
    z-index: -1; 
} 
.hiders { 
    margin: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

:

<div class="container"> 
<!-- container div is required to set absolute positions within it, so that .typing and .hiders exactly overlap --> 

    <p class="typing"> 
    This paragraph of text will be animated 
    with a "typewriter" style effect, and it 
    will continue to work even if it splits across 
    multiple lines. Well, in this case, up to a 
    maximum of 5 lines, but you get the picture. 
    </p> 

    <div class="hiders"> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    </div> 

</div> 

당신은 그들이 서로의 상단에있어 너무 absolute를 사용하여 .typing 요소와 .hiders을 컨테이너를해야하고, 위치 애니메이션은 .hiders 안에있는 p에 적용됩니다.

영감을

https://jsfiddle.net/hjwp/514cLzxn/

원래 신용 :

여기에 최종 바이올린의 Lea Verou

Answer 4

p 
 
{ 
 
    font:500 22px consolas;  
 
    width:20ch; 
 
    white-space:nowrap; 
 
    overflow:hidden; 
 
    animation:type 5s steps(20) infinite; 
 
} 
 
@keyframes type 
 
{ 
 
    0%{ width:0; } 
 
}

<p>Text Type Animation</p>