Fixed animation positioning when homepage animation completes
authorjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 8 Feb 2019 01:21:34 +0000 (01:21 +0000)
committerjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 8 Feb 2019 01:21:34 +0000 (01:21 +0000)
https://bugs.webkit.org/show_bug.cgi?id=194395

Reviewed by Devin Rousso.

* wp-content/themes/webkit/front-header.php:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@241178 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/wp-content/themes/webkit/front-header.php

index 996ceb3..47e3d22 100644 (file)
@@ -1,5 +1,14 @@
 2019-02-07  Jon Davis  <jond@apple.com>
 
+        Fixed animation positioning when homepage animation completes
+        https://bugs.webkit.org/show_bug.cgi?id=194395
+
+        Reviewed by Devin Rousso.
+
+        * wp-content/themes/webkit/front-header.php:
+
+2019-02-07  Jon Davis  <jond@apple.com>
+
         Disable the WP emoji polyfill
         https://bugs.webkit.org/show_bug.cgi?id=194394
 
index 9bf16a2..3024abb 100644 (file)
@@ -46,9 +46,9 @@
         position: absolute;
         width: 100%;
         height: 1261px;
-        background-image: radial-gradient(ellipse closest-corner at center center,hsl(198, 100%, 20%) 0%,hsla(204, 100%, 20%,0) 100%);
+        background-image: radial-gradient(ellipse closest-corner at center center, hsl(198, 100%, 20%) 0%, hsla(204, 100%, 20%, 0) 100%);
         z-index: 4;
-        transform: translateY(-45rem);
+        transform: translateY(-450px);
     }
 
     #template {
@@ -61,7 +61,8 @@
         background-position: 50% 49.5%;
         background-size: 101.5%;
         z-index: 3;
-        transform: translateY(-40rem);    }
+        transform: translateY(-400px);
+    }
 
     #compass {
         position: absolute;
         background-position: 50% 50%;
         background-size: 98%;
         opacity: 0.3;
-        -webkit-animation: bgspin 360s ease-out;
-        animation: bgspin 360s ease-out;
+        animation-name: bgspin;
+        animation-duration: 360s;
+        animation-timing-function: ease-out;
         z-index: 2;
         will-change: transform;
+        transform: translateY(-400px);
     }
 
     @keyframes bgspin {
         }
     }
 
-    @-webkit-keyframes bgspin {
-        from {
-            transform: translateY(-400px) rotate(0);
-            -webkit-transform: translateY(-400px) rotate(0deg);
-        }
-
-        to {
-            transform: translateY(-400px) rotate(360);
-            -webkit-transform: translateY(-400px) rotate(360deg);
-        }
-    }
-
     .hero .content {
         position: relative;
         max-width: 800px;
     @media (prefers-reduced-motion) {
         #compass {
             animation: none;
-            transform: translateY(-400px);
         }
     }
-
     </style>
 
     <?php if ( is_front_page() && have_posts()): the_post(); ?>