css3 animation не отображается в Chrome и Opera

andrey222

Захожу иногда
65
0 / 1

css3 animation не отображается в Chrome и Opera

« : 11.02.2014, 23:00:03 »

Всем привет! Делаю сайт http://vash-dom76.ru
На главной странице в верху блока с контентом вставляю html-код, на который прикрепил стили с сайта образца (http://tympanus.net/Tutorials/SplashComingSoonPageEffects/index2.html), немного мной подправленные.

В результате в последних версиях браузеров Mozilla Firefox и Internet Explorer все работает корректно, а в в последних версиях Google Chrome и Opera анимации вообще не происходит.

Пробовал добавлять
-o-
-webkit-
к animation, animation-delay (так же к text-shadow и opacity на всякий случай) - не помогает.

Если кто знает решение - прошу помочь. Заранее благодарю!

Записан

andrey222

Захожу иногда
65
0 / 1

Re: css3 animation не отображается в Chrome и Opera

« Ответ #1 : 12.02.2014, 01:03:39 »

Код постоянно пробую переделать. Прикрепляю тот, который сейчас так отображается.

Код

.css3-poyavlenie { width:830px; height: 80px;}
.css3-poyavlenie p {
text-align:center!important;
 
   position:absolute;

	margin-top:1px!important;
    font-size: 50px;
    width: 100%;
	display:block;
    text-align: center;
    color: transparent;
    animation: blurFadeInOut 3s ease-in backwards;
	-moz-animation: blurFadeInOut 3s ease-in backwards;
    -webkit-animation: blurFadeInOut 3s ease-in backwards;
	-ms-animation: blurFadeInOut 3s ease-in backwards;
}

.css3-poyavlenie p.text-1 {
    animation-delay: 0s;
	
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
	-ms-animation-delay: 0s;
	
}

.css3-poyavlenie p.text-2 {
    animation-delay: 3s;
    -moz-animation-delay: 3s;
    -webkit-animation-delay: 3s;
	-ms-animation-delay: 3s;
}

.css3-poyavlenie p.text-3 {
    animation-delay: 6s;
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
   -ms-animation-delay: 6s;
}
.css3-poyavlenie p.text-4 {
   animation-delay: 9s;
     -moz-animation-delay: 9s;
     -webkit-animation-delay: 9s;
	 -ms-animation-delay: 9s;
}

.css3-poyavlenie p.text-5 {
    animation: none;
  -moz-animation: none;
    -webkit-animation: none;
	-ms-animation: none;
    text-shadow: 0px 0px 0px #1467A4;
}
.css3-poyavlenie p.text-5 span {
   animation: blurFadeIn 2s ease-in 12s backwards;
   -moz-animation: blurFadeIn 2s ease-in 12s backwards;
   -webkit-animation: blurFadeIn 2s ease-in 12s backwards;
   -ms-animation: blurFadeIn 2s ease-in 12s backwards;
   text-shadow: 0px 0px 0px #1467A4;
	
}
.css3-poyavlenie p.text-5 span:nth-child(2) {
    animation-delay: 13s;
    -moz-animation-delay: 13s;
    -webkit-animation-delay: 13s;
    -ms-animation-delay: 13s;
}

@keyframes blurFadeInOut{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
	-moz-opacity: 0;
       }
    20%,75%{
        opacity: 1;
	-moz-opacity: 1;
        text-shadow: 0px 0px 0px #1467A4;
	      }
    100%{
        opacity: 0;
	-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		     
    }
}


@keyframes blurFadeIn{
    0%{
        opacity: 0;
	-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
	    }
    50%{
        opacity: 0.9;
	-moz-opacity: 0.9;
         text-shadow: 0px 0px 0px #1467A4;
		      
    }
    100%{
        opacity: 1;
	-moz-opacity: 1;
	text-shadow: 0px 0px 0px #1467A4;
		     
    }
}

Записан

al-teen

Глобальный модератор
2385
224 / 10
im

Re: css3 animation не отображается в Chrome и Opera

« Ответ #2 : 12.02.2014, 01:53:41 »

@keyframes, @-webkit-keyframes, @-moz-keyframes, @-o-keyframes и т.д. попробуйте вендорные префиксы

Записан

andrey222

Захожу иногда
65
0 / 1

Re: css3 animation не отображается в Chrome и Opera

« Ответ #3 : 12.02.2014, 12:25:36 »

Ни то ни другое не помогает.

Записан

andrey222

Захожу иногда
65
0 / 1

Re: css3 animation не отображается в Chrome и Opera

« Ответ #4 : 14.02.2014, 00:21:14 »

Все получилось! Заработал такой код:

Код

 
.css3-poyavlenie { width:830px; height: 80px;}
.css3-poyavlenie p {
text-align:center!important;
 
   position:absolute;

	margin-top:1px!important;
    font-size: 50px;
    width: 100%;
	display:block;
    text-align: center;
    color: transparent;
    animation: blurFadeInOut 3s ease-in backwards;
	-moz-animation: blurFadeInOut 3s ease-in backwards;
    -webkit-animation: blurFadeInOut 3s ease-in backwards;
	-ms-animation: blurFadeInOut 3s ease-in backwards;
	@keyframes-animation: blurFadeInOut 3s ease-in backwards;
	@-webkit-keyframes-animation: blurFadeInOut 3s ease-in backwards;
	@-moz-keyframes-animation: blurFadeInOut 3s ease-in backwards;
	@-o-keyframes-animation: blurFadeInOut 3s ease-in backwards;
}

.css3-poyavlenie p.text-1 {
    animation-delay: 0s;
	@-o-keyframes-animation-delay: 0s;
	@-moz-keyframes-animation-delay: 0s;
	@keyframes-animation-delay: 0s;
	@-webkit-keyframes-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
	-ms-animation-delay: 0s;
	
}
.css3-poyavlenie p.text-2 {
    animation-delay: 3s;
	@-o-keyframes-animation-delay: 3s;
	@-moz-keyframes-animation-delay: 3s;
	@keyframes-animation-delay: 3s;
	@-webkit-keyframes-animation-delay: 3s;
   
    -moz-animation-delay: 3s;
    -webkit-animation-delay: 3s;
	-ms-animation-delay: 3s;
}
.css3-poyavlenie p.text-3 {
    animation-delay: 6s;
	@-o-keyframes-animation-delay: 6s;
	@-moz-keyframes-animation-delay: 6s;
	@keyframes-animation-delay: 6s;
	@-webkit-keyframes-animation-delay: 6s;
   
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
	-ms-animation-delay: 6s;
}
.css3-poyavlenie p.text-4 {
   animation-delay: 9s;
  @-o-keyframes-animation-delay: 6s;
	@-moz-keyframes-animation-delay: 6s;
	@keyframes-animation-delay: 6s;
	@-webkit-keyframes-animation-delay: 6s;
   
    -moz-animation-delay: 9s;
     -webkit-animation-delay: 9s;
	 -ms-animation-delay: 9s;
}


.css3-poyavlenie p.text-5 {
    animation: none;
	@-o-keyframes-animation: none;
	@-moz-keyframes-animation: none;
	@keyframes-animation: none;
	@-webkit-keyframes-animation: none;
   
    -moz-animation: none;
    -webkit-animation: none;
	-ms-animation: none;
    text-shadow: 0px 0px 0px #1467A4;
}
.css3-poyavlenie p.text-5 span {
    animation: blurFadeIn 2s ease-in 12s backwards;
	@-o-keyframes-animation: blurFadeIn 2s ease-in 12s backwards;
	@-moz-keyframes-animation: blurFadeIn 2s ease-in 12s backwards;
	@keyframes-animation: blurFadeIn 2s ease-in 12s backwards;
	@-webkit-keyframes-animation: blurFadeIn 2s ease-in 12s backwards;
   
    -moz-animation: blurFadeIn 2s ease-in 12s backwards;
    -webkit-animation: blurFadeIn 2s ease-in 12s backwards;
	-ms-animation: blurFadeIn 2s ease-in 12s backwards;
    text-shadow: 0px 0px 0px #1467A4;
	
}
.css3-poyavlenie p.text-5 span:nth-child(2) {
    animation-delay: 13s;
	@-o-keyframes-animation-delay: 13s;
	@-moz-keyframes-animation-delay: 13s;
	@keyframes-animation-delay: 13s;
	@-webkit-keyframes-animation-delay: 13s;
    
    -moz-animation-delay: 13s;
    -webkit-animation-delay: 13s;
	-ms-animation-delay: 13s;
}



@keyframes blurFadeInOut{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		
    -moz-opacity: 0;
   
       
    }
    20%,75%{
        opacity: 1;
		-moz-opacity: 1;
        text-shadow: 0px 0px 0px #1467A4;
		
       
    }
    100%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		     
    }
}


@keyframes blurFadeIn{
    0%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
	    }
    50%{
        opacity: 0.9;
		-moz-opacity: 0.9;
         text-shadow: 0px 0px 0px #1467A4;
		      
    }
    100%{
        opacity: 1;
		-moz-opacity: 1;
		
       text-shadow: 0px 0px 0px #1467A4;
		      
    }
}

@-moz-keyframes blurFadeInOut{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		
    -moz-opacity: 0;
   
       
    }
    20%,75%{
        opacity: 1;
		-moz-opacity: 1;
        text-shadow: 0px 0px 0px #1467A4;
		
       
    }
    100%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		     
    }
}


@-moz-keyframes blurFadeIn{
    0%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
	    }
    50%{
        opacity: 0.9;
		-moz-opacity: 0.9;
         text-shadow: 0px 0px 0px #1467A4;
		      
    }
    100%{
        opacity: 1;
		-moz-opacity: 1;
		
       text-shadow: 0px 0px 0px #1467A4;
		      
    }
}

@-webkit-keyframes blurFadeInOut{
    0%{
        opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		
    -moz-opacity: 0;
   
       
    }
    20%,75%{
        opacity: 1;
		-moz-opacity: 1;
        text-shadow: 0px 0px 0px #1467A4;
		
       
    }
    100%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
		     
    }
}


@-webkit-keyframes blurFadeIn{
    0%{
        opacity: 0;
		-moz-opacity: 0;
        text-shadow: 0px 0px 0px #1467A4;
	    }
    50%{
        opacity: 0.9;
		-moz-opacity: 0.9;
         text-shadow: 0px 0px 0px #1467A4;
		      
    }
    100%{
        opacity: 1;
		-moz-opacity: 1;
		
       text-shadow: 0px 0px 0px #1467A4;
		      
    }
}

Записан

Свойство letter-spacing по-разному отображается на разных мониторах Автор V@lentin	Ответов: 1 Просмотров: 1443	19.07.2018, 20:53:29 от Zelyonkin
фон страницы в Яндекс браузере и Chrome в планшете Автор a7575859	Ответов: 0 Просмотров: 1788	21.07.2016, 16:20:56 от a7575859
Неправильно отображается шаблон на мобильных устройствах Автор hyperion	Ответов: 1 Просмотров: 1479	14.01.2016, 18:33:15 от arma
Логотип в мобильной версии не отображается Автор mashut	Ответов: 4 Просмотров: 4446	17.09.2015, 22:52:38 от Cybervizor
Неверно отображается сайт на Firefox Автор bobokhon1998	Ответов: 19 Просмотров: 2536	08.09.2015, 21:10:53 от bobokhon1998

css3 animation не отображается в Chrome и Opera - Вопросы по CSS

Новости Joomla

4AI для Joomla Готовим Контент с Помощью Искусственного Интеллекта!Ещё одно видео на канале Фёдора...

Модуль Joomla 6 - красивый обратный отсчет. Видео от Фёдора Васильева

Метод registerListeners() в CMSPlugin в плагинах планируется удалить в Joomla 7.0

andrey222

css3 animation не отображается в Chrome и Opera

andrey222

Re: css3 animation не отображается в Chrome и Opera

al-teen

Re: css3 animation не отображается в Chrome и Opera

andrey222

Re: css3 animation не отображается в Chrome и Opera

andrey222

Re: css3 animation не отображается в Chrome и Opera

Похожие темы