CSS transitions shaking in chrome and IE - html

Question

I am new to developing, can anyone please help me with this.. css transitions are shaking in chrome and IE, I have tried all possible styling to correct it, but could'nt. please help!.
here is the 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

instead of margin-top use top and use % instead of px on top it will be fine