过渡动画不起作用

有人可以告诉我我在做什么错在这里有关过渡？因为过渡动画完全不起作用，无论是在铬还是在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

过渡动画不起作用

回答

相关问题