변화가 쉬운 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

, 당신은 당신이 애니메이션하려는 속성을 지정해야합니다. 나는 지금 그것을 얻을,이 경우에 당신이 사용했던`all`은 모든 속성이 말을

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

좋아요 : 그래서, 예를 들어, 당신은 뭔가를 작성해야합니다. 너비를 '너비'로 변경하면 너비가 바뀌는 것을 의미합니다. +1 – Ozzy

예, 각 속성을 개별적으로 지정하거나 모두 사용할 수 있습니다. all을 사용하면 짧게 유지되지만 의도하지 않은 결과가 발생할 수 있으므로 각각을 지정하는 것이 가장 좋습니다. 나는 그것을 짧게 유지하기 위해 모두를 사용했습니다. –

그게 내가 생각한거야, 그래서 전이 폭을 지정하고 나는 상태에서 다른 점프로의 전환을 아직 얻지 못하고있다. 위의 예처럼 W3에서 보았던 예도 보더라도 전환을 막을 수있는 것이 있는지 알고 계십니까? –

변화가 쉬운 CSS3 전환이 효과적이지 않음

답변

관련 문제