CSS3轉換變異不易工作

我試着將代碼與幾個來源比較，其中包括我遵循的教程，使得它和我的轉換不起作用，它只是從其起始狀態跳轉到最後沒有動畫。預先感謝您。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; 
}

來源

2012-04-20 Daria A Shelton

當你指定一個過渡，你需要指定你想要進行動畫財產。因此，舉例來說，你應該寫這樣的：

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.

來源

2012-04-20 11:45:34

好，我現在就買下，在這種情況下，你已經使用'all'說所有屬性。您可以將其改爲「寬度」來表示寬度的過渡。 +1 – Ozzy 2012-04-20 12:37:42

是的，您可以單獨指定每個屬性，也可以全部使用。全部使用可以保持簡短，但可能會產生意想不到的後果，因此最好指定每一項。我只用全部來縮短它。 – 2012-04-20 13:08:39

這就是我的想法，所以我指定了過渡寬度，而且我還沒有從狀態跳轉到另一個狀態。你知道是否有什麼東西可以阻止它，即使我看到的例子，比如W3上面的例子，過渡很好嗎？ – 2012-04-20 20:36:26

CSS3轉換變異不易工作

回答

相關問題