Member 12768426 Ответов: 0

Css-переходы дрожат в chrome и ie. css-переходы дрожат в chrome и IE, я перепробовал все возможные стили, чтобы исправить это, но не смог' nt. Пожалуйста, помогите! .

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[^]

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


Что я уже пробовал:

попробовали backface-visibility: hidden;
и перешел с "от края до края" на "только сверху"..

Suvendu Shekhar Giri

Попробуйте создать проект в jsfiddle, чтобы мы действительно могли просмотреть проблему и предложить решение вашей проблемы.

Sinisa Hajnal

Я посмотрел на скрипку как на IE 11, так и на Chrome. И это работает гладко. Я запускал скрипку несколько раз.

Member 12768426

Первая строка работает хорошо, остальные строки дрожат как в chrome ,так и в IE, не знаю, в чем проблема, она не работает для меня..

0 Ответов