Question

我想将“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>

Answer 1

我知道这是一个旧帖子，但如果有人在寻找没有绝对定位的另一种解决方案，你可以使用保证金和翻译。像这样：

0% {
    margin-left: 100%;
    transform: translateX(0%);
}
100% {
    margin-left: 50%;
    transform: translateX(-50%);
}

Answer 2

正如Samih所说，你无法为两个非数字值之间的属性设置动画。

一种可行的方法是使用left属性（所以你需要绝对定位）与div结合使用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%;        }
      }

fiddle

Answer 3

我知道这只是个老问题，但是，您也可以使用calc（）sinc知道居中元素的宽度。

#letsgo {
   margin-left:100%;
   transition:all 1s;
}
#letsgo.animated {
   margin-left:calc((100vw - 500px)/2);
}

css3动画保证金自动无效

3 个答案: