html - CSS 过渡在 chrome 和 IE 中晃动

Question

我是开发新手，任何人都可以帮我解决这个问题.. css 转换在 chrome 和 IE 中摇晃，我已经尝试了所有可能的样式来纠正它，但不能。请帮忙!

这是 fiddle https://jsfiddle.net/Khan_Z/qoL4xqhq/

<header>
  <h2 id="head1"><span>Sometimes </span><span>you win </span> <span>sometimes</span> <span>you learn</span></h2>
     <div>
        <h2 id="head2" class="subtitle fancy"><span>Hi</span></h2>
        <h2 id="head3" >ABCD</h2>
        <p id="head4">UVWXYZ:)</p>

     </div>

#head1{
	width:100%;
	margin-top:375px ;
	font-size:40px;
    text-align:center;
	position:absolute;
}
#head2{
	
	position:absolute;
	font-size:42px;
	
	margin-top:450px;
	text-align:center;
	margin-left:47%;
	
}
#head3{

	position:absolute;
	margin-top:460px;
	margin-left:43%;
	font-size:40px;
	
	line-height:2;
	text-align:center;
}
#head4{
	
	position:absolute;
	margin-top:510px;
	margin-left:40%;
	font-size:35px;
	
	text-align:center;
}
#head1{
	
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation:none;
     animation: none;
	color: #fff;
	text-shadow: 0px 0px 1px #CCCCCC;
}

#head1 span {
	-webkit-animation: blurFadeIn 1s ease-in 0s backwards;
	-moz-animation: blurFadeIn 1s ease-in 0s backwards;
	-ms-animation: blurFadeIn 1s ease-in 0s backwards;
	animation: blurFadeIn 1s ease-in 0s backwards;
	color: black;
	text-shadow: 0px 0px 1px #CCCCCC;
}
#head1 span:nth-child(2) {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	
	animation-delay: 1s;
}
#head1 span:nth-child(3) {
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	
	animation-delay: 2s;
}
#head1 span:nth-child(4) {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	
	animation-delay: 3s;
}

#head2 {
	
	
	-webkit-animation: blurFadeIn 1s ease-in 0s backwards;
	-moz-animation: blurFadeIn 1s ease-in 0s backwards;
	-ms-animation: blurFadeIn 1s ease-in 0s backwards;
	animation: blurFadeIn 1s ease-in 0s backwards;
	color:black;
	text-shadow: 0px 0px 1px #CCCCCC;
}
#head2 {
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
	-ms-animation-delay:5s;
	animation-delay: 5s;
	
}
#head3 {
	
	
	-webkit-animation: blurFadeIn 1s ease-in 0s backwards;
	-moz-animation: blurFadeIn 1s ease-in 0s backwards;
	-ms-animation: blurFadeIn 1s ease-in 0s backwards;
	animation: blurFadeIn 1s ease-in 0s backwards;
	color: black;
	
	text-shadow: 0px 0px 1px #CCCCCC;
}
#head3 {
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
	-ms-animation-delay:5s;
	animation-delay: 5s;
	
}
#head4{
	
	
	-webkit-animation: blurFadeIn 1s ease-in 0s backwards;
	-moz-animation: blurFadeIn 1s ease-in 0s backwards;
	-ms-animation: blurFadeIn 1s ease-in 0s backwards;
	animation: blurFadeIn 1s ease-in 0s backwards;
	color: black;
   text-shadow: 0px 0px 1px #CCCCCC;
}
#head4 {
	
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-ms-animation-delay:6s;
	animation-delay: 6s;

}

@-webkit-keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
      -webkit-backface-visibility:hidden;
		-webkit-transform: scale(1.3);
	    transform: scale(1.3);
	}
	20%,75%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
	   -webkit-backface-visibility:hidden;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	100%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		-webkit-backface-visibility:hidden;
		-webkit-transform: scale(0);
		transform: scale(0);
	}
}
@-webkit-keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
	   -webkit-backface-visibility:hidden;
		-webkit-transform:scale(1.3);
		transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
	   -webkit-backface-visibility:hidden;
        -webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
	   -webkit-backface-visibility:hidden;
		-webkit-transform:  scale(1);
	    transform: scale(1);
	}
}
@-webkit-keyframes fadeInBack{
	0%{
		opacity: 0;
	    -webkit-backface-visibility:hidden;
		-webkit-transform: scale(0);
	     transform: scale(0);
	}
	50%{
		opacity: 0.4;
		-webkit-transform: scale(2);
		-webkit-backface-visibility:hidden;
		-webkit-transform:scale(2);
	     transform: scale(2);
	}
	100%{
		opacity: 0.2;
       -webkit-backface-visibility:hidden;
		-webkit-transform:scale(5);
		transform: scale(5);
	}
}
@-webkit-keyframes fadeInRotate{
	0%{
		opacity: 0;
		-webkit-transform: scale(0) rotate(360deg);
		transform: scale(0);
		-webkit-backface-visibility:hidden;
		-webkit-transform:  scale(0) ;

	}
	100%{
		opacity: 1;
		-webkit-transform: scale(1) rotate(-0deg);
		transform: scale(1);
		-webkit-backface-visibility:hidden;
		-webkit-transform: scale(1);
		
	}
}

Answer 1

代替 margin-top 使用 top 并使用 % 而不是顶部的 px 就可以了