我想将"letsgo"div从左边距100%移动到自动边距.即它停在左边距和右边距相等的点.但我无法弄清楚.请帮我.
我的守则如下:
<!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>
我知道这是一个旧帖子,但如果有人在寻找没有绝对定位的另一种解决方案,你可以使用保证金和翻译.像这样的东西:
0% {
margin-left: 100%;
transform: translateX(0%);
}
100% {
margin-left: 50%;
transform: translateX(-50%);
}
正如 Samih 所说，您不能为两个非数值之间的属性设置动画。
一种可能的方法是使用 left 属性（因此您需要绝对定位）结合 margin 将 div 居中：
#letsgo{
height: 600px;
width: 500px;
border: 2px solid #64BBF0;
border-radius: 2px;
margin: auto;
position: absolute;
box-shadow: 5px 5px 2px #64BBF0;
-webkit-animation-fill-mode: forwards;
-webkit-animation-name: miku;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes miku{
0% { margin-left: 0px;
left: 100%; }
100% { margin-left: -250px;
left: 50%; }
}