Новости Joomla

Русский язык для плагина N3T Cookie consent

Вставка VK VIDEO v.1.2.4 - плагин для Joomla.В новой версии добавлена поддержка вставки VK клипов

Компонент "Жимолость" v.1.2.0 (ex

Компонент "Жимолость" v.1.2.0 (ex. Спам-оборона для Joomla) Бесплатный компонент работает под Joomla и позволяет защищать формы сайта от атак спам ботов.👩‍💻 v.1.2.0. Что нового?Компонент полностью поддерживает работу с Joomla 6 без необходимости использования плагина совместимости. При этом поддержка Joomla 4 прекратилась, поскольку уже к Joomla 5 отличия между четвертой и пятой версиями были заметны. Компонент бесплатный. Существует версия для Joomla 3. Разработчик - участник нашего сообщества Владимир Егоров (@sitogon)Страница расширения#joomla #расширения

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 4913 Просмотров
*

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;
		      
    }
}
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Свойство letter-spacing по-разному отображается на разных мониторах

Автор V@lentin

 Ответов: 1
Просмотров: 1416 		Последний ответ 19.07.2018, 20:53:29
от Zelyonkin
фон страницы в Яндекс браузере и Chrome в планшете

Автор a7575859

 Ответов: 0
Просмотров: 1737 		Последний ответ 21.07.2016, 16:20:56
от a7575859
Неправильно отображается шаблон на мобильных устройствах

Автор hyperion

 Ответов: 1
Просмотров: 1455 		Последний ответ 14.01.2016, 18:33:15
от arma
Логотип в мобильной версии не отображается

Автор mashut

 Ответов: 4
Просмотров: 4406 		Последний ответ 17.09.2015, 22:52:38
от Cybervizor
Неверно отображается сайт на Firefox

Автор bobokhon1998

 Ответов: 19
Просмотров: 2484 		Последний ответ 08.09.2015, 21:10:53
от bobokhon1998