Html CSS3转换具有不同的易用性，不工作

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

HTML:

---

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

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

---

好的，我现在明白了，在这个例子中，您使用了

all

来表示所有属性。您可以将其更改为

width

，以表示宽度上的过渡+1是的，您可以单独指定每个属性，也可以使用所有属性。使用all可以使其简短，但可能会产生意想不到的后果，因此最好指定每一个。我只是用了所有的来保持它的简短。这就是我的想法，所以我指定了转换宽度，我仍然没有得到转换，只是从一个状态跳到另一个状态。你知道有没有什么东西可以阻止它，即使我看到的例子，比如上面W3的例子，转换很好？啊，你还需要改变调用id的方式。ID使用“#”符号，您编写的css调用的是类而不是ID。

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

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