CSS Animation 在 Safari 中有一个错误，但在 Firefox 和 Chrome 中工作

Question

我一直在尝试制作一个在页面加载时播放的标题动画。它在 Firefox 和 Chrome 中运行良好，但在 Safari 中，转换存在一个小错误。

首先，下图显示了 Chrome 中的网页加载情况。它在 Firefox 上看起来完全一样。 Webpage load on Chrome

接下来，下图显示了 Safari 中的网页加载。请注意最后的跳过，因为它一直跳到它应该在的位置。 Webpage load on Safari

所选代码：

.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;
    }
}

<div class="splash-site-header-1">
		<div class="splash-header-nav-2">
			<div id="splash-branding-3" class="splash-branding-3"><!--Various Wordpress php-->            </div>
          
            <div class="about-test-home">
				<div class="ath-quote">
					<h4><b>Aenean</b> eu leo quam. <b>Pellentesque</b> ornare sem lacinia quam venenatis vestibulum. Vestibulum Dapibus Consectetur Cras</h4>
				</div>
			</div>
          </div>
  </div>

如果您想了解更多有用的信息，请告诉我。非常感谢！

Answer 1

它似乎没有正确应用来自.about-test-home 的转换

将这个添加到类中似乎可以解决它。

  -webkit-transform: translateY(-50%); 

检查所有转换并确保在需要时使用了所有必要的 venfor 前缀可能是个好主意。

Answer 2

我意识到这是题外话，但我发现带有 animation-delay: 0ms 和 animation-duration: 0ms 的动画在 Safari 12 中不起作用。它们必须是积极的。