Changeset 241178 in webkit

Timestamp:

Feb 7, 2019 5:21:34 PM (5 years ago)

Author:

Jon Davis

Message:

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:

Location:

trunk/Websites/webkit.org

Files:

• ChangeLog (modified) (1 diff)
• wp-content/themes/webkit/front-header.php (modified) (5 diffs)

trunk/Websites/webkit.org/ChangeLog

@@ +1 @@
+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>
 

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

@@ -47 +47 @@
         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);
     }
 
@@ -62 +62 @@
         background-size: 101.5%;
         z-index: 3;
-        transform: translateY(-40rem);    }
+        transform: translateY(-400px);
+    }
 
     #compass {
@@ -73 +74 @@
         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);
     }
 
@@ -84 +87 @@
             -webkit-transform: translateY(-400px) rotate(0deg);
         }
-        to {
-            transform: translateY(-400px) rotate(360);
-            -webkit-transform: translateY(-400px) rotate(360deg);
-        }
-    }
-
-    @-webkit-keyframes bgspin {
-        from {
-            transform: translateY(-400px) rotate(0);
-            -webkit-transform: translateY(-400px) rotate(0deg);
-        }
-
         to {
             transform: translateY(-400px) rotate(360);
@@ -149 +140 @@
         #compass {
             animation: none;
-            transform: translateY(-400px);
         }
     }
-
     </style>