How to animate an element from top-left to bottom-right inside its container?

user_14538881 0
Viewed 789

I made a little "ultimate DVD screensaver" thing for fun, where a disc is animated to precisely hit corners, but for some reason the disc overshoots the bottom-right corner:

#box {
  border: solid;
  height: 85vmin;
  width: 85vmin;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#screensaver {
  position: relative;
  animation: DVD 5s linear infinite alternate;
  left: 0px;
  top: 0px;
}

@keyframes DVD {
  to {
    left: 100%;
    top: 100%;
  }
}
<div id="box"><span id="screensaver">O</span></div>

I've already tried using margin and padding instead of position, and animating from left: 0; top: 0 to right: 0; bottom: 0. Does anyone know why this happens, and if there's a way to solve it without having to fiddle with anything (e.g. if I change the height or width, I don't want to have to change anything else to make it work)?

css-animations css html
3 Answers

use a translation to rectify:

#box {
  border: solid;
  height: 85vmin;
  width: 85vmin;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#screensaver {
  position: relative;
  display:inline-block; /* don't forget this to be able to apply a transform */
  animation: DVD 5s linear infinite alternate;
  left: 0px;
  top: 0px;
}

@keyframes DVD {
  to {
    left: 100%;
    top: 100%;
    transform:translate(-100%,-100%);
  }
}
<div id="box"><span id="screensaver">O</span></div>

user_86203330

hope this code help you

change value.

form

@keyframes DVD {
  to {
    left: 100%;
    top: 100%;
  }
}

to

@keyframes DVD {
      to {
        left: 95%;
        top: 92%;
      }
    }


#box {
  border: solid;
  height: 85vmin;
  width: 85vmin;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#screensaver {
  position: relative;
  animation: DVD 5s linear infinite alternate;
  left: 0px;
  top: 0px;
}

@keyframes DVD {
  to {
    left: 95%;
    top: 92%;
  }
}
<div id="box"><span id="screensaver">O</span></div>

user_144356420

Left and top position are targeted at the top left corner of the animated object.

Use calc() css3 method to subtract the height and width of the object

@keyframes DVD {
  to {
    left: calc(100% - 10px);
    top: calc(100% - 10px);
  }
}
user_96346350
Related