Reversing an already ran animation using CSS only

Question

Can anyone help me to achieve that?

What I want: The loader should show up animatedly and when I click on the document the loader should hide animatedly with the same animation reversely.

Currently what's happening: For the first time the loader shows up animatedly but when I click on the document the loader hides immediately without animation. The reason is z-index.

My current code is:

HTML:

<div id="loader">
    <h1>Testing Loader</h1>
</div>

CSS:

#loader{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0%;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background-color: brown;
    z-index: -1;
    opacity: 0;
    animation-name: hideMe;
}
#loader.hideMe{
    animation-direction: reverse;
}
@keyframes hideMe{
    0%{
        z-index: -1;
        opacity: 0;
    }
    1%{
        z-index: 15;
    }
    100%{
        z-index: 15;
        opacity: 1;
    }
}

JavaScript:

<script type="text/javascript">
    document.addEventListener('click', ()=>{
        document.querySelector('#loader').classList.toggle('hideMe');
    });
</script>

Any help will be appreciated. Thanks.

mmirbekian · Answer 1 · 2023-03-15T14:57:30.967

0

I made some changes in already existing code here,

HTML

<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">
  <title>Document</title>
</head>

<body>
    <input type="checkbox" id="btnControl"/>
    <label class="btn" for="btnControl"><div> 
    <h1>Click Anywhere in page</h1></div></label>
</body>

</html>

CSS

    *{
      margin: 0;
    }
    #btnControl {
        color: black;
        display: none;
    }
    
    #btnControl:checked + label > div {
     
      background-color:red;
        width: 100%;
        height: 100%;
    }
    div{
    
      width: 100%;
      height: 100%;
    }
    h1 {
      padding: 10px;
      height: 1000px;
    }

Note :
if you need to use this animation div as your body background, then you should add any extra elements that you gonna use inside that div.(Nothing outside)

Previous code link: Can I have an onclick effect in CSS?

edited Mar 15 '23 at 14:57

answered Mar 15 '23 at 14:14

mmirbekian

211
2
10

Thanks for your reply. I've edited my question so now it's more clear than before. I want an authentic way! I don't want to use checkbox or some extra html for this brother. – Abdul Raheem Dumrai Mar 16 '23 at 06:39
@AbdulRaheemDumrai // So what I understood from your question: - - - 1) You want the loader to be the same size as your background or the background itself. - - - 2) You need it to ease in and ease out once after the page loads and no more animation after that. Am I right? – mmirbekian Mar 16 '23 at 15:07
1) Whenever I attach the hideMe class to the loader the loader should ease out animatedly. 2) When I remove the hideMe class from the loader the loader should ease in animatedly. – Abdul Raheem Dumrai Mar 16 '23 at 17:43
@AbdulRaheemDumrai by 'attaching' do you mean 'clicking'? – mmirbekian Mar 16 '23 at 21:14
I'm toggling hideMe Class on the loader. When the loader has hideMe class the loader should ease out animatedly. If there is no hideMe class then the loader should ease in animatedly. – Abdul Raheem Dumrai Mar 17 '23 at 05:50

Reversing an already ran animation using CSS only

1 Answers1