Question

我已经尝试将代码与一些来源进行比较，包括我遵循的教程以及我的转换不起作用，它只是从它的起始状态跳到最后没有动画。提前谢谢。

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

Answer 1

指定转场时，您需要指定要尝试设置动画的属性。所以，例如，你应该写一些类似的东西：

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.

改进的CSS3转换不起作用

1 个答案: