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秒，然后回到最右边，没有走到底部。然后它跳到了左边= 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 BLOCK

<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;}
}

css关键帧留下100％顶级100％奇怪的行为

2 个答案: