如何反转CSS3转换？
[英]How can I reverse the CSS3 transition?
问题描述
我有以下HTML，将鼠标悬停在div处向下增长，但我想向上增长。
<html>
<head>
<style type="text/css">
div
{
position:absolute;
top:130px;
left:30px;
width:100px;
height:100px;
background:red;
-webkit-transition:height 2s;
}
div:hover
{
height:200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
如何在悬停时反转转换？
1 个解决方案
解决方案1
6 已采纳 2011-02-10 11:12:37
尝试在div上而不是在top上设置bottom属性：
div
{
position:absolute;
bottom:130px;
left:30px;
width:100px;
height:100px;
background:red;
-webkit-transition:height 2s;
}
如何解决此CSS定位问题，以便进行过渡？ （带有Bootstrap的CSS3）
[英]How can I fix this CSS positioning for the transition to work? (CSS3 with Bootstrap)
CSS过渡：如何通过1个过渡使div移动，暂停和反转方向？
[英]CSS Transition: How can I make a div move, pause, and then reverse direction with 1 transition?
如何使用CSS3悬停过渡/转换效果在HTML元素上启用触摸幻灯片？
[英]How can I enable touch slide on an HTML Element using CSS3 Hover transition/transform effects?
当文档使用javascript加载时，如何执行css3转换？
[英]How can i execute a css3 transition when the document loads using javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.