CSS3动画边距自动不起作用 [英] css3 animation margin auto not working
本文介绍了CSS3动画边距自动不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将"letsgo" div的动画从左边距100％设置为margin auto.即它停在左边距和右边距相等的点上.但我不知道. 请帮助我.
i want to move the "letsgo" div to animate from left-margin 100% to margin auto. i.e it stop at a point where left margin and right margin are equal. but i can't figure it out. Please Help me.
下面给出了我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Do IT...</title>
<meta charset="UTF-8">
<style>
#letsgo{
height: 600px;
width: 500px;
border: 2px solid #64BBF0;
border-radius: 2px;
margin: auto;
position: relative;
animation-fill-mode: forwards;
box-shadow: 5px 5px 2px #64BBF0;
animation-name: miku;
animation-duration: 1s;
}
@keyframes miku{
0%{
margin-left: 100%;
}
100%{
margin: auto;
}
}
#doit{
height: 100px;
width: 100px;
border-radius: 50%;
background: yellow;
position: absolute;
top: 250px;
left: 200px;
}
.child{
height: 25px;
width:25px;
border-radius: 50%;
background: red;
position: absolute;
top: 287.5px;
left:237.5px;
}
*{
transition: all 2s ease-out;
}
#letsgo:hover .child{
box-shadow: -237.5px -287.5px red,
-237.5px 287.5px red,
237.5px -287.5px red,
237.5px 287.5px red,
237.5px 0 red,
-237.5px 0 red,
0 287.5px red,
0 -287.5px red;
}
}
</style>
</head>
<body>
<div id="letsgo">
<div id="doit"></div>
<div class="child"></div>
</div>
</body>
</html>
推荐答案
我知道这是一篇过时的文章，但是如果有人在寻找其他没有绝对定位的解决方案，则可以使用边距和翻译.像这样:
I know this is an old post, but if anyone is looking for another solution without absolute positioning, you can use margin and translate. Something like this:
0% {
margin-left: 100%;
transform: translateX(0%);
}
100% {
margin-left: 50%;
transform: translateX(-50%);
}
这篇关于CSS3动画边距自动不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
