0

我已经尝试将代码与一些来源进行比较，包括我遵循的教程和我的转换不起作用，它只是从它的起始状态跳到没有动画的结束。先感谢您。

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;
}
4

1 回答 1

2

指定过渡时，需要指定要设置动画的属性。因此，例如，您应该编写如下内容：

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;
}

这是有关使用过渡的更多信息。

于 2012-04-20T11:45:34.943 回答