CSSホバーエフェクトを作成したいと思っていますが、それはうまくいかないかもしれませんが、明るいスパークが私を指すことができるかどうか疑問に思っていました。正しい方向に！あなたは内容が滑らかなスタイルで上方に移動画像/テキストのdivに置くとcss translateY on Hoverエフェクトを作成するには
See this image here showing what I would like to achieve
だから
これは-webkit-でいくつかの画像が示す上記のdiv内のテキスト、しかしだろうトランジションtranslateY要素？
お持ちのアドバイスやガイドがありがとうございます。 Adam
ただ、完全性についてと比較して2つの遷移方法を参照してください。
jsfiddleこのホバー効果の例は2つあります。 1つはposition: top、もう1つはtransform: translateY
実際の違いはありません。 translateYは、ロールアウト/ロールオーバーを繰り返すとスムーズに見えます（Paulie_Dは既に彼の答えでパフォーマンスの向上を述べています）
はい、translateYプロパティを使用する必要があります。
あなたは覚えておきたいでしょう三つのことがある：
transform: translateY(); - これはポジショニング
transition: transform 0.2s ease 0s;のため明らかである - これは運動に
overflow:hidden;を滑らかにするためである - これは下を隠すことですあなたがホバリングしていないときの部分。
はここでフィドルです：https://jsfiddle.net/bwu8ckhn/
コード：
.one {
width:300px;
height:300px;
margin: 50px auto;
overflow:hidden;
background-color:lightblue;
}
.two {
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
-webkit-transform: translateY(200px);
transform: translateY(200px);
-webkit-transition: transform 0.2s ease 0s;
transition: transform 0.2s ease 0s;
}
.one:hover .two {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
p {
margin:0;
padding: 1em;
color:#ffffff;
}<div class="one">
<div class="two">
<p>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</p>
</div>
</div>それはを翻訳する必要がい...いいえ、あなたはポジショニングでこれを行うことができます。
おそらく、翻訳方法を使用するとパフォーマンスが向上する可能性があります。
.one {
width: 300px;
height: 300px;
margin: 50px auto;
overflow: hidden;
background-color: #663399;
position: relative;
}
.two {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
top: 80%;
transition: top .5s ease;
color: white
}
.one:hover .two {
top: 0;
}
p {
margin: 0;
padding: 1em;
color: #ffffff;
}<div class="one">
<div class="two">
<h2>Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aut provident quasi veniam earum officiis vero odit doloribus blanditiis? Veritatis ab repudiandae non labore eligendi quasi officia quibusdam accusamus sit harum quisquam soluta tempore,
odio at, iste animi numquam officiis, quam ipsa! Fuga suscipit temporibus perspiciatis explicabo ipsa laudantium aut.
</p>
</div>
</div>