Click here to Skip to main content
15,891,423 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
C#
css transitions are shaking in chrome and IE, I have tried all possible styling to correct it, but could'nt. please help!.


Edit fiddle - JSFiddle[^]

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


CSS
#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);
		
	}
}


What I have tried:

have tried backface -visibility:hidden;
and changed from from margin-top to only top..
Posted
Updated 30-Sep-16 19:29pm
v5
Comments
Suvendu Shekhar Giri 30-Sep-16 7:43am    
Try creating the project in jsfiddle so that we can actually view the issue and suggest on your problem.
Sinisa Hajnal 3-Oct-16 3:29am    
I've looked at the fiddle on both IE 11 and Chrome. And it works smoothly. I've run the fiddle multiple times.
Member 12768426 4-Oct-16 1:59am    
First line works good, rest of the lines shake both in chrome and IE, not sure where's the problem is ,its not working for me..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900