Question

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

Answer 1

请尝试以下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 */
}

Answer 2

添加顶部：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 {  }

如果这不是您问题的解决方案，我很抱歉。

过渡动画不起作用

2 个答案: