過渡動畫不起作用

有人可以告訴我我在做什麼錯在這裏有關過渡？因爲過渡動畫完全不起作用，無論是在鉻還是在opera瀏覽器中。
謝謝。過渡動畫不起作用

<!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;對於CSS中的＃block1，因爲您要爲「top」元素設置動畫效果。如果您願意，可以更改該值。動畫將起作用。

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

過渡動畫不起作用

回答

相關問題