css keyframe left 100% top 100% weird behavior - html

Question

So basically I am trying to make a box go around the border of the parent with CSS, it works well if I only specify percentage value to either top or left, something like
#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;}
}
but it animates very weird if I do
#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;}
}
the box got to the far right and then stopped there for 0.5 sec and then back to far right without going to the bottom. And then it jumped to the bottom at left=0px and came back up. You can see the result yourself, kind of hard to explain.
jsfiddler:
http://jsfiddle.net/jzawddLc/
http://jsfiddle.net/jqytraL7/
Running on IE 11 if that is important.

Answer 1

Set 100% height to html, body!
Account a negative margin to the box position
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>
Alternatively, instead of 100% if it's really the window size you're interested in (not an parent-inherited size) you can go for Viewport unit:
#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

You need to declare the start position of the box on the element.
//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;}
}