CSSのアニメーションが消えるようにする

ロゴ（縦の黒い線）がページの下部から上に引き上げられるようなロゴのアニメーションを作成しようとしています。CSSのアニメーションが消えるようにする

ロープがロゴの後ろに消えてしまった場合は、私はそれが欲しいですが、私はそれを行う方法がわかりません。

私はCSSの翻訳を行う方法を知っていますので、ロゴを動かすことは大丈夫です。私が確信しているのは消えているロープ部分です。

私はCSSが好きですが、JavaScriptは問題ありません。

おかげ

EDIT：これまでのCSSとHTMLのいくつかの追加：

body { 
background-color: White;" 
} 
ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
} 
li { 
display: inline-block; 
} 

li a { 
display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
margin: 0 
} 

li a:hover:not(.active) { 
background-color: blue; 
} 

.active { 
background-color: #4CAF50; 
} 
p.one { 
color: black; 
font-family: arial; 
padding-top: 50px; 
align="center"; 
} 

</style> 

</head> 

<body> 

<ul> 
<li><a class="active" href="#home">Home</a></li> 
<li><a href="#Products">Our Products</a></li> 
<li><a href="#Contact">Contact</a></li> 

</ul> 
<h1>Home</h1> 

<p class="one", align="center">Text</p>

出典

2016-03-27 Gg8

あなたが既に持っているコードを投稿することはできますか？次に、ロープコードを配置する場所を指定します。^-__-^ –

ようこそスタックオーバーフロー。これは要求であり、全く質問ではないようです。投稿する前に[ヘルプセンター]（http://stackoverflow.com/help/asking）をお読みください。 – Boaz

@PeterDavidCarterこんにちは、これは本当に1時間ほど前にこのページを開始しました。私はそれが中心にあり、h1とnav barの間の中心にありがとう！ – Gg8

あなたがロープをアニメーション化することができ（また、CSSで翻訳）あなたがロゴをアニメーション化と同時に、。親要素にoverflow: hidden;を使用してください。
ロープをHTMLキャンバスrect();で描画し、その高さをアニメートすることができます。

出典

2016-03-27 16:14:43 warkentien2

ありがとう、それを試みる！ – Gg8

CSSのアニメーションが消えるようにする

答えて

関連する問題