CSS Animation在Safari中有一个错误，但可以在Firefox和Chrome中使用

Question

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

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

接下来，下图显示了Safari中的网页加载。 请注意最后的跳过，因为它一直跳到应该一直停留的位置。 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中不起作用。它们必须是积极的。