Используя тему Gastro Wordpress и ее замечательный конструктор страниц, я создал страницу с двумя столбцами в www.alexanderschau.de. Я добавил пользовательскую CSS постепенную анимацию в поле изображения, и здесь мы go:
Всякий раз, когда я загружаю страницу, анимация как-то запускается дважды или прерывается. Вместо того, чтобы работать плавно, он как-то останавливается на миллисекунду, прежде чем начать заново. Это действительно странно, и я искал повсюду в исходном коде, но не могу найти причину для этого. Я тестировал как в Safari, так и в Firefox, и в обоих браузерах - то же самое.
На мобильных устройствах все отлично работает, поэтому я думаю, что это как-то связано с липкостью столбцов на рабочем столе.
Если у кого-то есть идея или она может взглянуть на код сайта, я буду очень признателен. Я потратил часы на поиск чего-либо, но я просто не могу. Кто бы ни разгадал эту загадку, мой личный король на все времена!
.fade-in {
animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}