CSS3トランジションが変化しやすくなっていない

コードをいくつかのソースと比較しようとしました。チュートリアルを含め、私のトランジションは機能していません。アニメーションを使わずに開始状態からジャンプしています。ありがとうございます。CSS3トランジションが変化しやすくなっていない

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <div id="no">no</div> 
    <div id="one">one</div> 
    <div id="two">two</div> 
    <div id="three">three</div> 
    <div id="four">four</div> 
    <div id="five">five</div> 
    <div id="minustwo">minustwo</div> 
</body>

はCSS：

div { 
width: 300px; 
margin: 5px 0; 
padding: 5px; 
color: white; 
background-color: #ED8029; 
text-align: left; 
border-radius: 5px; 
} 

div:hover { 
width: 700px; 
} 

div.no { 
-webkit-transition: 3s linear; 
-moz-transition: 3s linear; 
-o-transition: 3s linear; 
-ms-transition: 3s linear; 
transition: 3s linear 2s; 
} 

div.one { 
-webkit-transition: 3s linear 1s; 
-moz-transition: 3s linear 1s; 
-o-transition: 3s linear 1s; 
-ms-transition: 3s linear 1s; 
transition: 3s linear 1s; 
} 

div.two { 
-webkit-transition: 3s linear 2s; 
-moz-transition: 3s linear 2s; 
-o-transition: 3s linear 2s; 
-ms-transition: 3s linear 2s; 
transition: 3s linear 2s; 
} 

div.three { 
-webkit-transition: 3s linear 3s; 
-moz-transition: 3s linear 3s; 
-o-transition: 3s linear 3s; 
-ms-transition: 3s linear 3s; 
transition: 3s linear 3s; 
} 

div.four { 
-webkit-transition: 3s linear 4s; 
-moz-transition: 3s linear 4s; 
-o-transition: 3s linear 4s; 
-ms-transition: 3s linear 4s; 
transition: 3s linear 4s; 
} 

div.five { 
-webkit-transition: 3s linear 5s; 
-moz-transition: 3s linear 5s; 
-o-transition: 3s linear 5s; 
-ms-transition: 3s linear 5s; 
transition: 3s linear 5s; 
} 

div.minustwo { 
-webkit-transition: 3s linear -2s; 
-moz-transition: 3s linear -2s; 
-o-transition: 3s linear -2s; 
-ms-transition: 3s linear -2s; 
transition: 3s linear -2s; 
}

出典

2012-04-20 Daria A Shelton

トランジションを指定し、あなたがアニメーション化しようとしているプロパティを指定する必要があります。したがって、たとえば、あなたが何か書く必要があります：私は今、それを得る

div.no { 
-webkit-transition: all 3s linear; 
-moz-transition: all 3s linear; 
-o-transition: all 3s linear; 
-ms-transition: all 3s linear; 
transition: all 2s linear; 
}

Here's some more info on using transitions.

出典

2012-04-20 11:45:34

大丈夫、この場合には、あなたはすべてのプロパティを言うために、 'ALL'を使用しました。これを 'width'に変更すると、幅の遷移を意味するだけです。 +1 – Ozzy

はい、個々のプロパティを個別に指定することも、すべてを使用することもできます。 allを使用すると短くなりますが、意図しない結果が生じる可能性がありますので、それぞれを指定することをお勧めします。私はそれを短く保つためにすべてを使いました。 –

これは私が考えていたものなので、トランジション幅を指定しましたが、私はまだトランジションを状態から別のトランジションにジャンプさせていません。上記の例のように、私が見ているにもかかわらず、それをブロックする可能性のあるものがあるかどうかを知っていますか？ –

CSS3トランジションが変化しやすくなっていない

答えて

関連する問題