Я большой поклонник CSS3-анимации. Несмотря на предварительный старт и некоторые опасения по поводу того, что они нарушают поведенческие обязанности JavaScript, анимации CSS3 широко поддерживаются, просты в использовании и допускают эффектные эффекты, которые были бы невозможны без Flash несколько лет назад.
К сожалению, не все так радужно в саду CSS3, и производители браузеров часто разбрызгивают навоз по вашему патчу. Рассмотрим следующую анимацию светящегося элемента:
div
{
width: 8em;
font-weight: bold;
text-align: center;
padding: 0.5em 0;
margin: 50px auto;
color: #fff;
background-color: #00c;
border-radius: 3px;
animation: glow 3s ease-in-out infinite;
}
@keyframes glow {
50% { box-shadow: 0 0 20px #aaf; }
} Посмотреть демонстрационную страницу … 
(Примечание: префиксы -webkit для свойств анимации и ключевых кадров в настоящее время требуются для Chrome, Safari и Opera 15+, но не показаны в коде выше. Они были добавлены на демонстрационную страницу.)
Анимация хорошо работает в последних выпусках Firefox, Chrome, Safari и Opera — но не в IE10 или IE11.
Перед тем, как вы начнете знакомиться с разделом «это IE6 снова и снова» , давайте подробнее рассмотрим рабочий проект документа W3C CSS3 Animations . В разделе 4. Ключевые кадры вы найдете следующее утверждение:
ВОПРОС 1 Необходимо описать, что происходит, если свойство присутствует не во всех ключевых кадрах.
Мы определили только один ключевой кадр на 50%, но не определили явно свойства на 0% и 100%. Я подозреваю, что браузеры Webkit / Blink и Gecko по умолчанию используют box-shadow: 0px 0px 0px rgba(0,0,0,0); , Тем не менее, движок IE Trident по умолчанию выглядит как box-shadow: none; — и невозможно «оживить» от «ничего» до «чего-то» .
Строго говоря, ни один браузер не делает правильного предположения, потому что спецификация неполная. Возможно, команды Webkit / Blink и Gecko сделали более полезный выбор, но это не делает его правильным. Еще.
Тем не менее, вы бы надеялись, что IE запустит анимацию, если box-shadow: 0px 0px 0px rgba(0,0,0,0); были определены в селекторе div В спецификации говорится:
Если ключевой кадр «0%» или «из» не указан, то пользовательский агент создает ключевой кадр «0%», используя вычисленные значения анимируемых свойств. Если ключевой кадр «100%» или «to» не указан, то пользовательский агент создает ключевой кадр «100%», используя вычисленные значения анимируемых свойств.
Справедливости ради, спецификация анимации CSS3 развивается, поэтому неудивительно, что можно найти различия в реализации. К счастью, вы можете избежать кросс-браузерной анимации, следуя нескольким простым правилам:
- Всегда включайте ключевые кадры в 0% / от и 100% / до. Никогда не забывайте и символ ‘%’ — в отличие от других свойств, 0 и 0% не эквивалентны.
- Всегда определяйте каждое анимируемое свойство в каждом ключевом кадре — 0% и 100% особенно важны.
- Тестируйте часто, используя различные браузеры!
Чтобы анимация свечения работала везде, мы должны изменить определение ключевых кадров:
@keyframes glow
{
0% { box-shadow: 0 0 0px rgba(0,0,0,0); }
50% { box-shadow: 0 0 20px #aaf; }
100% { box-shadow: 0 0 0px rgba(0,0,0,0); }
}
Гарантий нет, но этот код должен продолжать работать независимо от каких-либо обновлений приложений или спецификации CSS3 Animation.
Эта проблема застала вас врасплох? Вы нашли исправление? Или ты сдался и обвинил браузер ?!