cannot move text in webpage after it is animated

Question

While trying to make page, I added animation-fill-mode: forwards . After the animation is done, i cannot move that particular text (which i animated) in the direction in which i animated. For example, if i animated using the top , then when i manually try to move the text (up or down), i cannot do it. Right and left works but top doesn't.

 * @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; tells it to use the final value of the animation as the CSS when the animation is done. This is expected behaviour.

You probably want to do animation-fill-mode: backwards to tell it to use the CSS after it is done, set the initial CSS to the final value, and then set your 0% keyframe to what the actual initial CSS is.

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