过渡动画不起作用
过渡动画不起作用
提问于 2014-02-24 01:15:11
有没有人能告诉我，我在过渡方面做错了什么？因为过渡动画根本不起作用，无论是在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>回答 2
Stack Overflow用户
发布于 2014-02-24 01:33:16
请尝试查看以下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 */
}Stack Overflow用户
发布于 2014-02-24 14:28:22
在css中为#block1添加top:0；，因为你想让"top“动画化，如果你想的话element.You可以改变这个值。动画将起作用。
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 { }如果这不是您问题的解决方案，我很抱歉。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21971529
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号