如何在其容器內從左上角到右下角對元素進行動畫處理？

Question

為了好玩，我做了一個“終極 DVD 屏幕保護程序”的東西，其中一個光盤動畫精確地擊中角落，但出於某種原因，光盤超出了右下角：

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

我已經嘗試過使用邊距和填充而不是位置，並從left: 0; top: 0動畫left: 0; top: 0 left: 0; top: 0 right: 0; bottom: 0 right: 0; bottom: 0 。 有誰知道為什么會發生這種情況，如果有辦法解決它而不必擺弄任何東西（例如，如果我更改高度或寬度，我不想更改任何其他內容以使其工作）？

Answer 1

使用翻譯來糾正：

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

Answer 2

希望此代碼對您有所幫助

改變值。

形式

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

到

@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>

Answer 3

左側和頂部位置以動畫對象的左上角為目標。

使用 calc() css3 方法減去對象的高度和寬度

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