title: CSS Animation has a bug in Safari, but working in Firefox and Chrome
body: <p>I've been trying to make a header animation that plays on page load. It works great in Firefox and Chrome, but in Safari there's a small bug with the transform.</p>
  
  <p>First, the following image shows the webpage load in Chrome. It looks exactly the same on Firefox.
  <a href="http://i.stack.imgur.com/Orn46.gif" rel="nofollow">Webpage load on Chrome</a> </p>
  
  <p>Next, the following image shows the webpage load in Safari. Note the skip at the end as it hops down to where it should be all along.
  <a href="http://i.stack.imgur.com/u5p82.gif" rel="nofollow">Webpage load on Safari</a></p>
  
  <p>Selected code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.splash-site-header-1 { 
   display: block;
   height: 100vh;
   width: 100%;
  }
  
  .splash-header-nav-2 {
   display: inline-block;
   position: relative;
   max-width: 900px;
   width: 65%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   top: 50vh;
  }
  
  .splash-branding-3 {
   display: block;
   position: relative;
   width: 40%;
   height: 18em;
   /*background-image: url("Ipsum_Logo.svg");
   background-position: center center;
   background-size: contain;
   background-repeat: no-repeat;*/
      background-color: red;
   overflow: hidden; 
   float: left;
   
      animation-name: logo-slide;
      animation-iteration-count: 1;
      animation-timing-function: ease-in-out;
      animation-duration: 6s;
      
      -moz-animation-name: logo-slide;
      -moz-animation-iteration-count: 1;
      -moz-animation-timing-function: ease-in-out;
      -moz-animation-duration: 6s;
  
      -webkit-animation-name: logo-slide;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-duration: 6s;
  }
  
  .about-test-home {
   position: relative;
   width: 55%;
   height: auto;
   float: right;
   top: 144px; /* Half height */
   transform: translateY(-50%); 
   
   animation-name: word-slide;
      animation-iteration-count: 1;
      animation-timing-function: ease-in-out;
      animation-duration: 6s;
      
      -moz-animation-name: word-slide;
      -moz-animation-iteration-count: 1;
      -moz-animation-timing-function: ease-in-out;
      -moz-animation-duration: 6s;
  
      -webkit-animation-name: word-slide;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-duration: 6s;
  }
  
   .ath-quote { 
    float:right;
   }
  
  
  @-moz-keyframes logo-slide {
      0% {
          -moz-transform: translateX(-25%);
          opacity: 0;
      }
      10% {
       opacity: 0;
      }
      55% {
       -moz-transform: translateX(75%);
       opacity: 1;
      }
      90% {
       -moz-transform: translateX(75%);
      }
      100% {
          -moz-transform: translateX(0);
    opacity: 1;
      }
  }
  
  @-webkit-keyframes logo-slide {
      0% {
          -webkit-transform: translateX(-25%);
          opacity: 0;
      }
      10% {
       opacity: 0;
      }
      55% {
       -webkit-transform: translateX(75%);
       opacity: 1;
      }
      90% {
       -webkit-transform: translateX(75%);
      }
      100% {
          -webkit-transform: translateX(0);
      }
  }
  
  @keyframes logo-slide {
      0% {
          transform: translateX(-25%);
          opacity: 0;
      }
      10% {
       opacity: 0;
      }
      55% {
       transform: translateX(75%);
       opacity: 1;
      }
      90% {
       transform: translateX(75%);
      }
      100% {
         transform: translateX(0);
      }
  }
  
  @-moz-keyframes word-slide {
      0% {
          opacity: 0;
      }
      90% {
       -moz-transform: translateX(-50%) translateY(-50%);
       opacity: 0;
      }
      100% {
          -moz-transform: translateX(0) translateY(-50%);
          opacity: 1;
      }
  }
  
  @-webkit-keyframes word-slide {
      0% {
          opacity: 0;
      }
      90% {
       -webkit-transform: translateX(-50%) translateY(-50%);
       opacity: 0;    
      }
      100% {
          -webkit-transform: translateX(0) translateY(-50%);
          opacity: 1;
      }
  }
  
  @keyframes word-slide {
      0% {
          opacity: 0;        
      }
      90% {
       transform: translateX(-50%) translateY(-50%);
       opacity: 0;   
      }    
      100% {
          transform: translateX(0) translateY(-50%);
          opacity: 1;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="splash-site-header-1"&gt;
    &lt;div class="splash-header-nav-2"&gt;
     &lt;div id="splash-branding-3" class="splash-branding-3"&gt;&lt;!--Various Wordpress php--&gt;            &lt;/div&gt;
            
              &lt;div class="about-test-home"&gt;
      &lt;div class="ath-quote"&gt;
       &lt;h4&gt;&lt;b&gt;Aenean&lt;/b&gt; eu leo quam. &lt;b&gt;Pellentesque&lt;/b&gt; ornare sem lacinia quam venenatis vestibulum. Vestibulum Dapibus Consectetur Cras&lt;/h4&gt;
      &lt;/div&gt;
     &lt;/div&gt;
            &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If there's anything more you want to see that would be helpful, let me know. Thanks a lot!</p>