使用转换的div动画 [英] div animation using transition
本文介绍了使用转换的div动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想从左到右移动时为div设置动画元素
div移动正常，但没有动画
这是非常快的
，并且超过了我分配的顶部和右侧属性到悬停时，但它不会发生
HTML：
<身体GT;< DIV>< / DIV>< /体>
CSS：
div
{
width：100px;
height：100px;
背景：红色;
transition-property：right，left;
转换期限：10s;
-webkit-transition-property：right，left; / * Safari * /
-webkit-transition-duration：2s; / * Safari * /
transition-timing-function：ease;
位置：绝对;
}
div：hover
{
right：30px;
top：10px;
}
我需要div轻松缓慢地移动
<首先，您需要为起始位置定义 right ，例如 right：calc（ 100％ - 100px）;
.wrap {宽度：100％; height：100px;背景：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>
I want to animate the div when moving from left to right The div is moving fine but with no animation It is very fast and more over i have assigned the top and right property to the div when hover but it is not happening
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;
}
I need the div to be moved with ease and slowly
解决方案
First you need to define right for starting position, e.g 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>
这篇关于使用转换的div动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
