Анимация с ключевыми кадрами не синхронизирована

Правильно работает с моей локальной файловой системой, а не с сервера. По какой-то причине он начинает синхронизироваться. Спасибо за любую помощь. Только поставщик, префикс для WebKit. Испытано в Chrome 26.Demo: http://cssdesk.com/jjqKK Анимация с ключевыми кадрами не синхронизирована

HTML:

<ul class="slides"> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 1</span></li> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 2</span></li> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 3</span></li> 
</ul>

CSS:

ul.slides{ 
    position: relative; 
    background: #000; 
    height: 100px; 
    width: 200px; 
    padding: 0; 
} 
ul.slides li{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    height: inherit; 
    width: inherit; 
    padding: 0; 
    margin: 0; 
    -webkit-animation: slideshow 9s linear infinite; 
} 
ul.slides.clickpause:active li{ 
    -webkit-animation-play-state:paused; 
} 
ul.slides li:nth-child(1){ -webkit-animation-delay: 0s; } 
ul.slides li:nth-child(2){ -webkit-animation-delay: 3s; } 
ul.slides li:nth-child(3){ -webkit-animation-delay: 6s; } 
@-webkit-keyframes slideshow{ 
0%{ 
    opacity: 0; 
    z-index: 2; 
} 
3%{ 
    opacity: 1; 
} 
30%{ 
    opacity: 1; 
} 
33%{ 
    opacity: 0; 
} 
34%{ 
    z-index: 1; 
} 
100%{ 
    opacity: 0; 
} 
} 
ul.slides li img{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    padding: 0; 
    margin: 0 
} 
ul.slides li span{ 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    background: rgba(40, 40, 40, 0.8); 
    color: #FFF; 
    padding: 5px 
}

Демо: http://cssdesk.com/jjqKK

Пожалуйста, нет ответов, которые используют JavaScript. Благодаря!

источник

2013-04-07 Mooseman

ли вы имеете в виду это 'вспышки' третий слайд, перед началом анимации ? – Chris

Выглядит хорошо на моем Chrome. Возможно, в начале была вспышка, я не могу сказать. –

@Chris Нет, здесь нет синхронизации. например, слайд 1 показывает 3s, тогда как слайд 2 показывает менее 1 с; то после слайда 3 происходит задержка, пока снова не появится слайд 1. – Mooseman

Ваша анимация может не всегда начинаться одновременно.

Я обнаружил, что отрицательные задержки работают очень хорошо, сохраняя синхронизацию. С помощью этого метода каждая анимация будет загружаться одновременно, но некоторые части начинают в прошлом. Проверьте jsbin пример:

http://jsbin.com/EreYIdE/2/edit

отредактированный добавить пример инлайн:

ul { 
 
    background: #000; 
 
    height: 100px; 
 
    padding: 0; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
li { 
 
    height: inherit; 
 
    margin: 0; 
 
    opacity: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: inherit; 
 
    
 
    -webkit-animation: slideshow 9s linear infinite; 
 
    animation: slideshow 9s linear infinite; 
 
} 
 

 
li:nth-child(1) { 
 
    -webkit-animation-delay: -9s; 
 
    animation-delay: -9s; 
 
} 
 

 
li:nth-child(2) { \t 
 
    -webkit-animation-delay: -6s; 
 
    animation-delay: -6s; 
 
} 
 

 
li:nth-child(3) { \t 
 
    -webkit-animation-delay: -3s; 
 
    animation-delay: -3s; 
 
} 
 

 
@-webkit-keyframes slideshow { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    3% { 
 
    opacity: 1; 
 
    } 
 
    30% { 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes slideshow { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    3% { 
 
    opacity: 1; 
 
    } 
 
    30% { 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
img { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
span { 
 
    background: rgba(40, 40, 40, 0.8); 
 
    color: #fff; 
 
    padding: 5px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset=utf-8 /> 
 
<title>JS Bin</title> 
 
</head> 
 
<body> 
 
<ul> 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <span>Image 1</span> 
 
\t 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <span>Image 2</span> 
 
\t 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <span>Image 3</span> 
 
</ul> 
 
</body> 
 
</html>

источник

2014-01-17 00:02:18 helloworld

Работает здесь, спасибо! – Mooseman

Вы должны добавить триггер анимации с использованием JavaScript

Javascript demo

window.onload = function(){ }

или jQuery demo

$(window).load(function(){})

в CSS3 анимации и перехода s старт сразу перед тем документ груз.

источник

2013-04-08 07:37:41

Идея здесь - быть свободным от JS. – Mooseman

Из того, что я могу сказать, это единственный способ синхронизации анимации CSS. По крайней мере, JS очень минимален. Единственные другие альтернативы будут включать намного больше JS (добавление/удаление классов и использование переходов вместо анимации ключевого кадра CSS). Это не заслуживает каких-либо понижений. Спасибо, Ахмад. –

Привет, ссылка сломана на вашем демо..пожалуйста, вы можете подробнее объяснить в своем примере (полная строка кода), thx :) –

Анимация с ключевыми кадрами не синхронизирована

ответ

Смежные вопросы