전환 애니메이션이 작동하지 않습니다.

전환에 대해 내가 뭘 잘못하고 있는지 말해 줄 수 있습니까? 전환 애니메이션은 크롬이나 오페라 브라우저에서 전혀 작동하지 않기 때문에
감사합니다.전환 애니메이션이 작동하지 않습니다.

<!doctype html> 
<html lang="en"> 
<head> 
<title>ttt</title> 
<style type="text/css"> 
    body {font: 13px sans-serif; } 

#montage-wrap {width: 820px; height: 200px; } 
.montage-block {width: 200px; height: 200px; float: left; display: block; overflow: hidden; position: relative;} 

#block1 { width: 200px; height: 200px; position: absolute; display: block; 
background: url("square.png"); 

-webkit-transition: top .3s; } 

.montage-block:hover #block1 { top: -180px; } 

.thumb_content { } 

</style> 
</head> 
<body> 


<div id="montage-wrao"> 

<div class="montage-block"> 
    <span id="block1"></span> 
    <div class="thumb_vontent"> 
     <h1>title</h1> 
     <p>subtitle</p> 
    </div> 
</div> 

</div> <!-- montage wrap --> 

</body> 
</html>

출처

2014-02-23 Johnny Blade

다음 CSS를 시도해보십시오. webkit이없는 다른 브라우저에서 CSS 전환을 볼 수 없습니다.

http://jsfiddle.net/8jQbN/

CSS: 
-webkit-transition: all 3s ease; /* Firefox */ 
-moz-transition: all 3s ease; /* WebKit */ 
-o-transition: all 3s ease; /* Opera */ 
transition: all 3s ease; /* Standard */ 
}

출처

2014-02-23 17:33:15 Marcel

예 .. 감사합니다.하지만 애니메이션이 작동하지 않습니다 .... –

위에 추가 : 0; # block1 for CSS에서 "상단"요소를 애니메이션으로 만들려고합니다. 원하는 경우 값을 변경할 수 있습니다. 애니메이션이 작동합니다.

body { 
font: 13px sans-serif; 
} 

#montage-wrap { 
width: 820px; 
height: 200px; 
} 
.montage-block { 
width: 200px; 
height: 200px; 
float: left; 
display: block; 
overflow: hidden; 
position: relative; 
} 

#block1 { 
width: 200px; 
height: 200px; 
position: absolute; 
display: block; 
background:red; 
top:0; 
-webkit-transition: top 1s ease-in-out; 
-moz-transition: top 1s ease-in-out; 
-o-transition: top 1s ease-in-out; 
transition: top 1s ease-in-out; 
} 

.montage-block:hover #block1 { 
top: -180px; 
} 

.thumb_content { }

귀하의 문제를 해결할 수 없다면 죄송합니다.

출처

2014-02-24 06:28:22 QieynaYeen

전환 애니메이션이 작동하지 않습니다.

답변

관련 문제