gpt4 book ai didi

javascript - 使用过渡的 div 动画

转载 作者:行者123 更新时间:2023-11-30 11:44:12 31 4
gpt4 key购买 nike

我想在从左向右移动时为 div 设置动画div 移动正常但没有动画它非常快更重要的是,我已经在悬停时将 top 和 right 属性分配给了 div,但它没有发生

HTML:

<body><div></div></body>

CSS:

div
{
width:100px;
height:100px;
background:red;
transition-property: right, left;
transition-duration: 10s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}

div:hover
{
right:30px;
top:10px;
}

JS Fiddle

我需要轻松且缓慢地移动 div

最佳答案

首先你需要为起始位置定义right,例如right: calc(100% - 100px);

.wrap {
width: 100%;
height: 100px;
background: orange;
}
.cube {
width:100px;
height:100px;
background:red;
right: calc(100% - 100px);
transition-property: right;
transition-duration: 10s;
-webkit-transition-property: right; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
.wrap:hover .cube
{
right:30px;
}
  <div class="wrap">
<div class="cube"></div>
</div>

关于javascript - 使用过渡的 div 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41563584/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com