Keyframes gremlin?-CodePudding

I've been studying web development for about 2 weeks now. I've just started animations and I'm trying to complete a CSS assignment using Keyframes where I need to make an element move

from the top-left of the viewport
to the top-right
to the bottom-right
to the bottom-left
and back to the top-left again.

My element makes it almost to the bottom-left corner, but not quite, and then just kind of cuts the corner and returns to the top-left corner at a weird angle. On top of that, I can't manage to keep the element itself on the page or in a container div during the animation.

.box{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: black;
    top: 0;
    left:0;
    border-radius: 50%;
    position: relative;
    animation-name: slideme;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    

}

#container{
    width: 800px;
    height: 800px;
    border: 1px solid red;
    position: absolute;
}

@keyframes slideme{

    0%{
        top: 0;
        left: 0;
    }

    25%{
        left: 100%;
        top: 0;
    }

    50%{
        left: 100%;
        top: 100%;
    }

    75%{
       right: 100%;
       top: 100%;
    }

    100%{
       left:0 ;
       top: 0;
    }

}

This is what I've written so far and it gets me 3/4 of the way there, but I can't for the life of me figure out why there's that little corner cut at the end. Any help or advice on this would be greatly, greatly appreciated.

I attempted to change the values of the 100%{} attribute, and I also attempted to extend the animation to make sure it had enough time to play through.

CodePudding user response：

This is because you're using right in the 75% keyframe instead of left, see what it looks like with left instead:

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: black;
  top: 0;
  left: 0;
  border-radius: 50%;
  position: relative;
  animation-name: slideme;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

#container{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: absolute;
}

@keyframes slideme {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    left: 100%;
  }
  50% {
    top: 100%;
    left: 100%;
  }
  75% {
    top: 100%;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}

<div id="container">
  <div ></div>
</div>

I sped up your animation and made the box smaller, but it should be otherwise the same code!

I just saw that you want to contain the element within the parent container/page: you can use calc for this! Check it out:

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: black;
  top: 0;
  left: 0;
  border-radius: 50%;
  position: relative;
  animation-name: slideme;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

#container {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: absolute;
}

@keyframes slideme {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    left: calc(100% - 100px);
  }
  50% {
    top: calc(100% - 100px);
    left: calc(100% - 100px);
  }
  75% {
    top: calc(100% - 100px);
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}

<div id="container">
  <div ></div>
</div>