プログラミングの助け、質問への回答 / Html / CSS3 - なぜ私の変換が機能していないのですか？ - html、css、css3

CSS3 - 私のトランスフォームはなぜ機能しないのですか？ - html、css、css3

私はCSS3のトランジションを使っていますが、これが最初です transform 私は試してみましたが、同じルールでは動かないようです。（注：私はちょうど -moz 今のところ....）

私が達成しようとしているもの：

のホバー上に li それは子供です .feat_tt 20pxでアニメーション化
私はそれを元の位置に戻したい

私のコード：

.feat_tt { top: -180px; -moz-transition: all 300ms ease-out;}
.feat_props li:hover .feat_tt { -moz-transform: translate(0, 20px); }

何が起こるのですか：

アニメーションは最初に実行されます .feat_tt ホバリング
デホバー上では、その位置は元に戻りません
他のものをつまむ .feat_tt 最初のアニメーションの後では、あたかもアニメーションがすでに実行されているかのようになります（それらは別々です li"s）

ここではいくつかのサンプルhtml私はこれを使用しています：

<ul class="feat_props">
<li>
<p>Barsham West Barns</p>
<div class="feat_tt">Sleeps 44 people mofo!</div>
</li>
<li>
<p>Barsham West Barns</p>
<div class="feat_tt">Sleeps 44 people mofo!</div>
</li>
<li>
<p>Barsham West Barns</p>
<div class="feat_tt">Sleeps 44 people mofo!</div>
</li>
</ul>

回答：

回答№1は0

あなたのコードはFirefox 5で動作します。私がしたのは、あなたがHTML5ページに書き込んだものすべてをダンプすることでした

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.feat_tt { top: -180px; -moz-transition: all 300ms ease-out;}
.feat_props li:hover .feat_tt { -moz-transform: translate(0, 20px); }
</style>
</head>

<body>

<ul class="feat_props">
<li>
<p>Barsham West Barns</p>
<div class="feat_tt">Sleeps 44 people!</div>
</li>
<li>
<p>Barsham West Barns</p>
<div class="feat_tt">Sleeps 44 people!</div>
</li>
<li>
<p>Barsham West Barns</p>
<div class="feat_tt">Sleeps 44 people!</div>
</li>
</ul>
</body>
</html>

CSS3プロパティの変換の使い方については、 http://www.w3schools.com/css3/css3_2dtransforms.asp

CSS3 - 私のトランスフォームはなぜ機能しないのですか？ - html、css、css3

回答：

関連する質問