純粋なCSSの実装を使用してアニメーションを入力

こんにちは、このガイドに従って、タイプアニメーションを作成するにはhttp://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/です。しかし、すべてのdiv要素の後にカーソルが点滅するが、アニメーションは発生しない点に達している。問題を見渡し、問題の内容を確認してください。純粋なCSSの実装を使用してアニメーションを入力

HERESに私のHTML構造：

<div class="line1"> 
    &lt;!DOCTYPE html><span>&nbsp;</span> 
</div> 
<div class="line2"> 
    &lt;html><span>&nbsp;</span> 
</div> 
<div class="line3"> 
    &emsp;&lt;head><span>&nbsp;</span> 
</div> 
<div class="line4"> 
    &emsp;&emsp;&lt;title&gt; 
    <p>Welcome! :)</p> 
    &lt;/title><span>&nbsp;</span> 
</div>

ここでは私のCSSコードやHTMLコードへのjfiddleのリンクはあなたの助けのための

ありがとうです！

出典

2017-01-12 lobcity42

あなたはこの単純なスニペットを試すことができ、私たちのような

@-webkit-keyframes typing { 
 
    from { width: 0 } 
 
    to { width:16.3em } 
 
} 
 

 
@-moz-keyframes typing { 
 
    from { width: 0 } 
 
    to { width:16.3em } 
 
} 
 

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

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

 
body { font-family: Consolas, monospace; } 
 

 
h1 { 
 
    font-size:150%; 
 
    width:16.3em; 
 
    white-space:nowrap; 
 
    overflow:hidden; 
 
    border-right: .1em solid black; 
 
    
 
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */ 
 
         blink-caret 1s step-end infinite; 
 
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */ 
 
         blink-caret 1s step-end infinite; 
 
} 
 
h2 { 
 
    font-size:150%; 
 
    width:16.3em; 
 
    white-space:nowrap; 
 
    overflow:hidden; 
 
    border-right: .1em solid black; 
 
    
 
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */ 
 
         blink-caret 1s step-end infinite; 
 
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */ 
 
         blink-caret 1s step-end infinite; 
 
} 
 
h3 { 
 
    font-size:150%; 
 
    width:16.3em; 
 
    white-space:nowrap; 
 
    overflow:hidden; 
 
    border-right: .1em solid black; 
 
    
 
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */ 
 
         blink-caret 1s step-end infinite; 
 
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */ 
 
         blink-caret 1s step-end infinite; 
 
}

<h1>Typing animation is working </h1> 
 
<h2>Typing animation is working </h2> 
 
<h3>Typing animation is working </h3>

出典

2017-01-12 05:06:30

の下にアニメーション部分を定義する必要が

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
@-webkit-keyframes typing { 
    from { width: 0 } 
    to { width:710px; } 
} 

@-moz-keyframes typing { 
    from { width: 0 } 
    to {width:710px; } 
} 

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

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

body { font-family: Consolas, monospace; } 

h1 { 
    font-size:150%; 
    width:710px; 
    white-space:nowrap; 
    overflow:hidden; 
    border-right: .1em solid black; 

    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */ 
         blink-caret 1s step-end infinite; 
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */ 
         blink-caret 1s step-end infinite; 
} 
</style> 
</head> 

<body> 
<h1> 
&lt;!DOCTYPE html><span>&nbsp;</span>&lt;html><span>&nbsp;</span>&emsp;&lt;head><span>&nbsp;</span>&emsp;&emsp;&lt;title&gt;Welcome! :)&lt;</title><span>&nbsp;</h1> 
</body> 
</html>

出典

2017-01-12 05:12:01

見てください、この単純なCSS

をお試しください

p{ 
 
    color: #3D3F46; 
 
    font-size: 20px; 
 
    margin: 10px 0 0 10px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    animation: type 10s steps(60, end); 
 
} 
 

 
p:nth-child(2){ 
 
    animation: type2 8s steps(60, end); 
 
} 
 

 
p a{ 
 
    color: #3D3F46; 
 
    text-decoration: none; 
 
} 
 

 
span{ 
 
    animation: blink 1s infinite; 
 
} 
 

 
@keyframes type{ 
 
    from { width: 0; } 
 
} 
 

 
@keyframes type2{ 
 
    0%{width: 0;} 
 
    50%{width: 0;} 
 
    100%{ width: 100; } 
 
} 
 

 
@keyframes blink{ 
 
    to{opacity: .0;} 
 
}

<p>Hi This is the sample text for typing effect using css <span>|</span></p>

出典

2017-01-12 05:35:07 user7357089

とても素敵です:) –

純粋なCSSの実装を使用してアニメーションを入力

答えて

関連する問題