Html css关键帧左100%顶部100%怪异行为

因此，基本上，我试图用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:

在IE 11上运行，如果这很重要的话

• 将

  100%

  高度设置为

  html，body

• 将负保证金计入方框头寸

html，正文{高度：100%；}
正文{margin:0；}/*如果需要*/
div{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
-webkit动画：mymove 5s无限；/*Chrome、Safari、Opera*/
动画：mymove 5s无限；
}
@关键帧mymove{
0%{顶部：0；左侧：0；背景：红色；}
25%{顶部：0；左侧：100%；边距：0-100px；背景：蓝色；}
50%{顶部：100%；左侧：100%；边距：-100px；背景：黄色；}
75%{顶部：100%；左侧：0；边距：-100px 0；背景：绿色；}
100%{顶部：0px；左侧：0；边距：0；背景：红色；}
}

---

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

//HTML块

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

---

我想让它绕过边界，而不仅仅是上下移动，如果我将计算（100%-100px）应用于顶部和左侧，那么它就不会移动anymore@Steve，是的，如果您在CSS中设置

html，body{height:100%；}

，它会成功的：IE 11支持最新的css3，我相信，如果我只指定左边的百分比值，而不是顶部，它就会成功。（这意味着我不需要-ms-）@Steve Word。像往常一样糟糕。使用交叉浏览器（较新的浏览器；）解决方案编辑我的答案正如我所说，如果我使用像素作为单位，我可以让它移动，但是当我开始使用100%时，它就不能工作了。在实际id（#child）上使用百分比而不是px，然后将所有其他动画更改为%。使用50%而不是100%，你只需要在整个过程中保持单位的一致性。我刚刚更新了我的代码以向您显示输入的.thx，不幸的是，这不适用于IE（即使在我删除了-webkit-）我认为这是IE中的一个bug，但Roko提供的解决方案在IE 10+上运行良好。。。但是只要你能用Roko的就好了。css属性是受支持的，但结果并不理想。。是的。。IE sux一如既往LOL

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