CSS 关键帧左侧 100% 顶部 100% 奇怪的行为

Question

所以基本上我试图用 CSS 让一个框绕过父级的边界，如果我只将百分比值指定到顶部或左侧，它会很好地工作，例如

@keyframes mymove {
    0%   {top: 0px; left: 0px; background: red;}
    25%  {top: 0px; left: 100%; background: blue;}
    50%  {top: 100px; left: 100%; background: yellow;}
    75%  {top: 100px; left: 0px; background: green;}
    100% {top: 0px; left: 0px; background: red;}
}

但如果我这样做，它的动画会很奇怪

@keyframes mymove {
        0%   {top: 0px; left: 0px; background: red;}
        25%  {top: 0px; left: 100%; background: blue;}
        50%  {top: 100%; left: 100%; background: yellow;}
        75%  {top: 100%; left: 0px; background: green;}
        100% {top: 0px; left: 0px; background: red;}
    }

盒子到了最右边，然后

停在那里0.5秒，然后回到最右边，没有走到底部。然后它跳到底部 left=0px 并重新上升。你可以自己看到结果，有点难以解释。

JSFIDDLER：

http://jsfiddle.net/jzawddLc/http://jsfiddle.net/jqytraL7/

如果这很重要，请在 IE 11 上运行。

Answer 1

• 将100%高度设置为 html, body ！
• 账户为箱仓头寸的负保证金

html, body{ height:100%; }
body{margin:0;} /* if needed... */
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
  animation: mymove 5s infinite;
}
@keyframes mymove {
    0%   {top: 0; left: 0; background: red;}
    25%  {top: 0; left: 100%;     margin:0 -100px; background: blue;}
    50%  {top: 100%; left: 100%;  margin:-100px;   background: yellow;}
    75%  {top: 100%; left: 0;     margin:-100px 0; background: green;}
    100% {top: 0px; left: 0;      margin: 0;        background: red;}
}

<div></div>

或者，与其100%它真的是您感兴趣的窗口大小(不是父继承的大小(，不如选择视口单元：

@keyframes mymove {
  0%   {top: 0; left: 0; background: red;}
  25%  {top: 0; left: calc(100vw - 100px); background: blue;}
  50%  {top: calc(100vh - 100px); left: calc(100vw - 100px); background: yellow;}
  75%  {top: calc(100vh - 100px); left: 0; background: green;}
  100% {top: 0px; left: 0; background: red;}
}

Answer 2

您需要在元素上声明框的起始位置。

/

/HTML 块

<div id="parent">
    <div id="child"></div>
</div>

/

/CSS BLOCK

#parent{
    display: flex;
    display: -webkit-flex;
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
}
#child{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0%;
    left: 0%;
    background:blue;
    -webkit-animation: mymove 10s infinite; 
}
@-webkit-keyframes mymove {
    0%   {top: 0%; left: 0%; background: red;}
    25%  {top: 0%; left: 50%; background: blue;}
    50%  {top: 50%; left: 50%; background: yellow;}
    75%  {top: 50%; left: 0%; background: green;}
    100% {top: 0%; left: 0%; background: orange;}
}