This is the code :

enter code here
        <style type="text/css">
        body  
          {
            overflow: hidden;
            background-image:url(AU.gif) ;
            border-image-repeat: no-repeat;
            display: inline-block;
            vertical-align: top;
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            margin: 60px 450px;
            background-position: center center;
            background-size: cover;
        }
       body>.grid 
        {
            height: 100%;
        }
        
        .image 
        {
            margin-top: -100px;
        }
        
        .column     
        {
            max-width: 450px;
        }

Output :

[enter image description here][1]

------ this is GIF of my webpage ------ [1]: https://i.stack.imgur.com/GflkC.gif

Now , I want to do umm when any user open this webpage then the GIF aniamation stop at that GIF first state(which is we can see all kind of lines and Dots) and pause there in current position after user enter write login creds then this GIF animation continue and go to its last state (which is we can see GIF animation become invisible). So that kind of any css attribute or JS code possible or not ? Thank you in advance.