Question

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

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

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

选定代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果还有其他任何想要看到的内容，请告诉我们。非常感谢！

Answer 1

它似乎无法正确应用.about-test-home

中的转换

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

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

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

Answer 2

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

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

2 个答案: