title: Animating a fixed element
body: <p>I'm trying to add a slide up animation to my form, but I have had no luck so far.</p>
  
  <p>Basically on click of a button the form appears, the form is fixed to the center of the screen to show the contents to the user. However, for the past few days I've been trying to add a very simple slide animation.</p>
  
  <p>The animation should take 1 second and the form should slide up to the max-height available of the device but as I previously mentioned no luck as of yet.</p>
  
  <p>I did try a simple opacity animation on the form without it being fixed and it worked, which suggests the fixed element is causing an issue but I'm not sure if this is the full extent of the issue. </p>
  
  <p>Below I will provide the markup I am using for the form, this includes the HTML (EJS Template) and the CSS (SCSS).</p>
  
  <pre><code>&lt;!-- HTML Markup --&gt;
  &lt;div id="modal-form"&gt;
    &lt;span aria-hidden="true" id="close"&gt;&lt;i class="fas fa-times"&gt;&lt;/i&gt; &lt;/span&gt;
    &lt;div class="modal-content" role="document"&gt;
      &lt;div class="modal-header"&gt;
        &lt;h3&gt; &lt;%= campground.name %&gt;&lt;span&gt;&lt;/span&gt; Enquiry Form&lt;/h3&gt;
      &lt;/div&gt; 
      &lt;div class="modal-body"&gt;
            &lt;% include ../partials/enquiry-form %&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  //Styling for the form
  #modal-form {
    @include position(fixed,0,0,0,0); //position, left, right, bottom, top
    background-color: $white; 
    z-index: 2;
    visibility: hidden;
    @include flex(column, center, center); //Flex by default, flex-direction, justify-content, align-items
    width: 100%;
  
    //Close button
    #close {
      @include position(absolute,0,null,null,0); //position, left, right, bottom, top
      @include border-radius(100%);
      margin: 10px;
      padding: 3px 8px;
      i {
        font-size: 2rem;
        &amp;:hover {
          cursor: pointer;
        }
      }
    }
  
    .modal-content {
      position: relative;
      @include flex(column, null, null); //Flex by default, flex-directio, justify-content, align-items
      width: 80vw;  
      margin-top: 50px;
      .modal-header {
        @include flex(column, center, center); //Flex by default, flex-direction, justify-content, align-item
      }
  
      h3 {
        font-weight: $font-weight-normal;
        font-size: $h3-size;
      }
  
      .modal-body {
        @include flex(null, center, null); //Flex by default, flex-direction, justify-content, align-items
      }
    }
  }
  </code></pre>
  
  <p>I hope someone can help me with this simple problem, this is my first time trying to do an animation, I felt it was appropriate for the form. It looked relatively but clearly not for my scenario.  </p>
  
  <p>Cheers,</p>
  
  <p>Alex</p>