Анимации CSS являются замечательным инструментом в руках веб дизайнера. С их помощью можно создавать практически любые чудеса в окне веб браузера. Есть пара "но". Первое "но" - создание анимаций часто связано с использованием пустых элементов div, что выходит за рамки семантичности кода HTML. Второе "но" - не все браузеры поддерживают анимации. И пользователи таких программ видят перед собой пустое окно вместо великолепной динамической картины.
Но что если в пустом элементе div размещать описание для тех пользователей, которые не могут позволить себе пользоваться последними версиями модных браузеров. Такое использование будет очень похоже на применение тега alt для изображений.
Сделаем анимацию восхода луны и темнеющей земли.
Code
<div class="moon">
Луна восходит.
</div>
<div class="ground">
И освещает землю.
</div>
CSS скрывает текст и вызывает анимации:
Code
.ground, .moon {
text-indent: -9999px;
overflow: hidden; /* text-indent без данного свойства может привести к рваным анимациямы */
}
.ground {
-webkit-animation: ground-to-black 5s ease;
-moz-animation: ground-to-black 5s ease;
-ms-animation: ground-to-black 5s ease;
}
.moon {
-webkit-animation: rising-moon 5s ease;
-moz-animation: rising-moon 5s ease;
-ms-animation: rising-moon 5s ease;
}
/* Далее следует определение кадров */
Вместо текста можно использовать что-то еще, связанное с темой анимации. Например, элемент audio.
Затем можно использовать JavaScript для определения возможностей браузера и позиционирования текста, если потребуется.
Данный урок подготовлен для Вас командой сайта ruseller.com
Источник урока: css-tricks.com/14458-semantic-animation/
Перевел: Сергей Фастунов
