Hello! how would I prevent my Icon animation from snapping back to the original position?

My animation works fine however at the end,the icons snap back to the original position in the centre of the window. What i want is for them to fade away and not return once the animation has been triggered. Can anyone help?

Javascript code:

function closingState() {
    
  document.getElementsByClassName("notready-reasons")[0].style.animation = "moveleft 0.45s ease 0s 1";
}

CSS code:

.notready-reasons {
  width:100%; height: 100%; background-color: #283243; z-index: 9999999; position: absolute; left:0px; margin-top:0px; 
}
@keyframes moveleft {
  from {opacity: 1; left: 10px;}
  to {opacity: 0; left: -700px;}
}

Html code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="sidebar.css">
  <title>Document</title>

</head>
<body>
    <div class="notready-reasons">  
      <div style="display: grid; grid-template-columns: repeat(8,1fr); margin-left:-20px;  width:100px; text-align: center; color:#FFFFFF; height:60px;">
        <div id="btnReady" class="overlay-state" onclick="closingState()" ><img src="" height="100%" width="100%"><span class="tooltiptext"></span></div>
        <div id="btnNotReady" class="overlay-state" onclick="moveIconsLeft()" ><img src=" height="100%" width="100%"><span class="tooltiptext"></span></div>
        <div id="btnBreak" class="overlay-state" onclick=""><img src=" height="100%" width="100%"><span class="tooltiptext"></span></div>
        <div id="btnEmail" class="overlay-state" onclick=""><img src="" height="100%" width="100%"><span class="tooltiptext"></span></div>
        <div id="btnLunch" class="overlay-state" onclick=""><img src="" height="100%" width="100%"><span class="tooltiptext"></span></div>
        <div id="btnComfortBreak" class="overlay-state" onclick=""><img src="" height="100%" width="100%"><span class="tooltiptext"></span></div>
        <div id="btnMeeting" class="overlay-state" onclick=""><img src="" height="100%" width="100%"><span class="tooltiptext"></span></div>
        <div id="btnChat" class="overlay-state" onclick=""><img src="" height="100%" width="100%"><span class="tooltiptext"></span></div>
      </div>
    </div>
</body>
<script type="text/javascript" src="sidebar.js"></script>
</html>

Add the forwards value to the end of the animation rule and the animation stays at the last key frame value.


moveleft 0.45s ease 0s forwards

Off topic : It’s generally better to keep the css out of the js and just use js to add a class to trigger the animation from the css file.

3 Likes

Thank you so much dude! Just what I was looking for :grinning:

2 Likes