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 に答える