0
我試着將代碼與幾個來源比較,其中包括我遵循的教程,使得它和我的轉換不起作用,它只是從其起始狀態跳轉到最後沒有動畫。 預先感謝您。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;
}
好,我現在就買下,在這種情況下,你已經使用'all'說所有屬性。您可以將其改爲「寬度」來表示寬度的過渡。 +1 – Ozzy 2012-04-20 12:37:42
是的,您可以單獨指定每個屬性,也可以全部使用。全部使用可以保持簡短,但可能會產生意想不到的後果,因此最好指定每一項。我只用全部來縮短它。 – 2012-04-20 13:08:39
這就是我的想法,所以我指定了過渡寬度,而且我還沒有從狀態跳轉到另一個狀態。你知道是否有什麼東西可以阻止它,即使我看到的例子,比如W3上面的例子,過渡很好嗎? – 2012-04-20 20:36:26