動畫后無法在網頁中移動文本

Question

嘗試制作頁面時，我添加了animation-fill-mode: forwards 。 動畫完成后，我無法將特定文本（動畫）沿動畫方向移動。 例如，如果我使用top動畫，那么當我手動嘗試移動文本（向上或向下）時，我將無法執行此操作。 左右都可以，但top不能。

 * @media screen and (max-width: 768px) {} @keyframes heading { from { top: 350px; } to { top: 300px; } } @keyframes quote { from { top: 290px } to { top: 240px } } @keyframes button { from { opacity: 0 } to { opacity: 1 } } @keyframes mvbut { from { top: 266px; right: 185px } to { top: 250px; right: 170px; } } .button { background-color: white; color: black; padding: 16px 32px; text-align: center; font-size: 16px; transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: black; border: 1px solid white; position: relative; top: 266px; right: 185px; border-radius: 30px 7px; display: block; margin: auto; opacity: 0; animation-name: button; animation-duration: 0.5s; animation-delay: 2s; animation-fill-mode: forwards; } .button1:hover { background-color: black; color: white; } .button3:click { animation-name: mvbut; animation-duration: 1s; animation-fill-mode: forwards; } .button2 { background-color: white; color: black; border: 1px solid white; position: relative; top: 210px; left: 0px; border-radius: 30px 7px; display: block; margin: auto; opacity: 0; animation-name: button; animation-duration: 0.5s; animation-delay: 2.3s; animation-fill-mode: forwards; } .button2:hover { background-color: black; color: white; } .button3 { background-color: white; color: black; border: 1px solid white; position: relative; top: 154px; left: 185px; border-radius: 30px 7px; display: block; margin: auto; height: auto; opacity: 0; animation-name: button; animation-duration: 0.5s; animation-delay: 2.6s; animation-fill-mode: forwards; } .button3:hover { background-color: black; color: white; } @font-face { font-family: beatsurge; src: url(neutronium.ttf); } p.border { border-style: solid; border-width: 2px; padding: 20px; position: absolute; border-radius: 50px 20px; position: absolute; } body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; } h1 { color: white; font-family: beatsurge; font-size: 100px; text-align: center; top: 350px; left: 0px; position: relative; animation-name: heading; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; } p { font-size: 20px; text-align: center; color: white; position: relative; top: 290px; left: 0px; animation-name: quote; animation-duration: 1s; animation-delay: 1.25s; animation-fill-mode: forwards; } 

 <div> <h1><strong>BEAT SURGE</strong></h1> </div> <p> Where words fail, music speaks. </p> <button class="button button1">Remixes</button> <button class="button button2">Original Content</button> <button class="button button3">About Us</button> 

Answer 1

animation-fill-mode: forwards; 告訴它在完成動畫時將動畫的最終值用作CSS。 這是預期的行為。

您可能想要做animation-fill-mode: backwards告訴它完成后使用CSS，將初始CSS設置為最終值，然后將0%關鍵幀設置為實際的初始CSS。

 * @media screen and (max-width: 768px) {} @keyframes heading { 0% { top: 350px; } 100% { top: 300px; } } @keyframes quote { from { top: 290px } to { top: 240px } } @keyframes button { from { opacity: 0 } to { opacity: 1 } } @keyframes mvbut { from { top: 266px; right: 185px } to { top: 250px; right: 170px; } } .button { background-color: white; color: black; padding: 16px 32px; text-align: center; font-size: 16px; transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: black; border: 1px solid white; position: relative; top: 266px; right: 185px; border-radius: 30px 7px; display: block; margin: auto; opacity: 0; animation-name: button; animation-duration: 0.5s; animation-delay: 2s; animation-fill-mode: forwards; } .button1:hover { background-color: black; color: white; } .button3:click { animation-name: mvbut; animation-duration: 1s; animation-fill-mode: forwards; } .button2 { background-color: white; color: black; border: 1px solid white; position: relative; top: 210px; left: 0px; border-radius: 30px 7px; display: block; margin: auto; opacity: 0; animation-name: button; animation-duration: 0.5s; animation-delay: 2.3s; animation-fill-mode: forwards; } .button2:hover { background-color: black; color: white; } .button3 { background-color: white; color: black; border: 1px solid white; position: relative; top: 154px; left: 185px; border-radius: 30px 7px; display: block; margin: auto; height: auto; opacity: 0; animation-name: button; animation-duration: 0.5s; animation-delay: 2.6s; animation-fill-mode: forwards; } .button3:hover { background-color: black; color: white; } @font-face { font-family: beatsurge; src: url(neutronium.ttf); } p.border { border-style: solid; border-width: 2px; padding: 20px; position: absolute; border-radius: 50px 20px; position: absolute; } body { background-image: url("background.jpg"); background-color: blue; background-repeat: no-repeat; background-size: cover; } h1 { color: white; font-family: beatsurge; font-size: 100px; text-align: center; top: 300px; left: 0px; position: relative; animation-name: heading; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: backwards; } p { font-size: 20px; text-align: center; color: white; position: relative; top: 290px; left: 0px; animation-name: quote; animation-duration: 1s; animation-delay: 1.25s; animation-fill-mode: forwards; } 

 <div> <h1><strong>BEAT SURGE</strong></h1> </div> <p> Where words fail, music speaks. </p> <button class="button button1" onClick="document.querySelector('h1').style.top = '280px';">Remixes</button> <button class="button button2">Original Content</button> <button class="button button3">About Us</button>