0
我一直在試圖製作一個在頁面加載時播放的頁眉動畫。它在Firefox和Chrome中運行良好，但在Safari中，轉換有一個小錯誤。CSS動畫在Safari中有一個錯誤，但在Firefox和Chrome中工作
首先，下圖顯示了Chrome中的網頁加載情況。它在Firefox上看起來完全一樣。 Webpage load on Chrome
接下來，下圖顯示了Safari中的網頁加載。注意跳到最後，因爲它跳躍到它應該一直在的地方。 Webpage load on Safari
所選代碼：
.splash-site-header-1 {
\t display: block;
\t height: 100vh;
\t width: 100%;
}
.splash-header-nav-2 {
\t display: inline-block;
\t position: relative;
\t max-width: 900px;
\t width: 65%;
\t left: 50%;
\t transform: translateX(-50%) translateY(-50%);
\t top: 50vh;
}
.splash-branding-3 {
\t display: block;
\t position: relative;
\t width: 40%;
\t height: 18em;
\t /*background-image: url("Ipsum_Logo.svg");
\t background-position: center center;
\t background-size: contain;
\t background-repeat: no-repeat;*/
background-color: red;
\t overflow: hidden; \t
\t float: left;
\t
\t 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 {
\t position: relative;
\t width: 55%;
\t height: auto;
\t float: right;
\t top: 144px; /* Half height */
\t transform: translateY(-50%);
\t
\t 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;
}
\t .ath-quote {
\t \t float:right;
\t }
@-moz-keyframes logo-slide {
0% {
-moz-transform: translateX(-25%);
opacity: 0;
}
10% {
\t opacity: 0;
}
55% {
\t -moz-transform: translateX(75%);
\t opacity: 1;
}
90% {
\t -moz-transform: translateX(75%);
}
100% {
-moz-transform: translateX(0);
\t \t opacity: 1;
}
}
@-webkit-keyframes logo-slide {
0% {
-webkit-transform: translateX(-25%);
opacity: 0;
}
10% {
\t opacity: 0;
}
55% {
\t -webkit-transform: translateX(75%);
\t opacity: 1;
}
90% {
\t -webkit-transform: translateX(75%);
}
100% {
-webkit-transform: translateX(0);
}
}
@keyframes logo-slide {
0% {
transform: translateX(-25%);
opacity: 0;
}
10% {
\t opacity: 0;
}
55% {
\t transform: translateX(75%);
\t opacity: 1;
}
90% {
\t transform: translateX(75%);
}
100% {
transform: translateX(0);
}
}
@-moz-keyframes word-slide {
0% {
opacity: 0;
}
90% {
\t -moz-transform: translateX(-50%) translateY(-50%);
\t opacity: 0;
}
100% {
-moz-transform: translateX(0) translateY(-50%);
opacity: 1;
}
}
@-webkit-keyframes word-slide {
0% {
opacity: 0;
}
90% {
\t -webkit-transform: translateX(-50%) translateY(-50%);
\t opacity: 0;
}
100% {
-webkit-transform: translateX(0) translateY(-50%);
opacity: 1;
}
}
@keyframes word-slide {
0% {
opacity: 0; \t
}
90% {
\t transform: translateX(-50%) translateY(-50%);
\t opacity: 0;
}
100% {
transform: translateX(0) translateY(-50%);
opacity: 1;
}
}<div class="splash-site-header-1">
\t \t <div class="splash-header-nav-2">
\t \t \t <div id="splash-branding-3" class="splash-branding-3"><!--Various Wordpress php--> </div>
<div class="about-test-home">
\t \t \t \t <div class="ath-quote">
\t \t \t \t \t <h4><b>Aenean</b> eu leo quam. <b>Pellentesque</b> ornare sem lacinia quam venenatis vestibulum. Vestibulum Dapibus Consectetur Cras</h4>
\t \t \t \t </div>
\t \t \t </div>
</div>
</div>如果有什麼事更要看到，這將是有益的，讓我知道。非常感謝！