Q&A
どのように動作させるつもりで書いたものですか？
タイピングアニメーションをCSSだけで作ろうとしているのですが、なぜか動きません。
実現したいことは、タイトルの通り「タイピングアニメーション」です。
このURL（https://www.webdesign-tch.org/html/210/）の 7. typing text effect cssです。
エラーメッセージは出ていませんが、Devloper tool で見てみると、CSSの中のanimationのところが消されています。
なぜでしょうか？
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <link href="styles/styles.css" rel="stylesheet"> 6 <link rel="preconnect" href="https://fonts.gstatic.com"> 7 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet"> 8 <title>My test page</title> 9 </head> 10 <body> 11 <div class = 'top'> 12 <h1 class='title'>Welcome to my website</h1> 13 </div> 14 <img src='images/portrait.jpg' alt="My portrait image"> 15 <p>Hello hello hello! Welcome to my website!</p> 16 <p>Are you excited about my journey?</p> 17 <p>What I will be learning at Codaisseur:</p> 18 <ul> 19 <li>HTML</li> 20 <li>CSS</li> 21 <li>JS</li> 22 <li>React</li> 23 <li>Redux</li> 24 <li>Express.js</li> 25 </ul> 26 </body> 27</html> 28
CSS
1html { 2 font-family: 'Noto Sans', sans-serif; 3 background-color: #90eeff; 4} 5 6body { 7 width: 500px; 8 margin: 20px auto; 9 background-color: white; 10 padding: 0 20px 20px 20px; 11 border: 5px solid #003e49; 12} 13 14.top { 15 margin: 20px 0; 16 padding: 0; 17 text-align: center; 18 width: 42ch; 19 border-right: 0.08em solid; 20 overflow: hidden; 21 white-space: nowrap; 22 animation: typing 5s steps (21, end), caret .5s step-end infinite; 23} 24 25@keyframes typing {from {width: 0; }} 26@keyframes caret { 50% { border-color: transparent; } } 27 28img { 29 display: block; 30 margin: 0 auto; 31 width: 200px; 32} 33 34p { 35 font-size: 1em; 36} 37 38li { 39 font-style: italic; 40}
「動きません」とのことですが、具体的には何が起きていますか？ エラーメッセージなどをご提示ください。
結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1
エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2
期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3
回答2件
0
こんばんは。
打ち間違いがあるようです。
css
1 animation: typing 5s steps (21, end), caret .5s step-end infinite; 2/* ^これがいらないです。 */
投稿2021/02/09 08:29
総合スコア36946
0
自己解決
stepsの後ろにspaceがあったのが動かない理由でした。解決しました。
投稿2021/02/09 08:39
総合スコア1
ご解決されて何よりです。
次に質問をする機会がありましたら、自己解決をせずに、役に立った回答をベストアンサーにしてください。
無視されると、結構悲しいです。
あなたの回答
tips
プレビュー
