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