Кодинг
★ Рубрика: Кодинг
★ Тема: CSS, анимация

Пример css-анимации

Здесь приведен простой учебный пример анимации на чистом css. Готовый код примера приведен ниже. Также можно посмотреть саму анимацию - движущийся квадрат. «Анимация» в CSS всегда сводилась к hover-эффектам. С помощью псевдоклассов :hover и :focus мы могли изменять цвет, размер и положение элемента, цвет фона и другие свойства CSS, основываясь на действиях пользователя.
Используя :hover, вы получаете всего два положения: с наведенным курсором и с не наведенным, иначе говоря, только два ключевых кадра: начальный и конечный, никаких промежуточных состояний межу этими положениями, и, как результат, резкий и внезапный переход между ними. По сути дела, это никакая не анимация. Переходы CSS3 transitions решили задачу промежуточных состояний, позволив переходить из не наведенного состояния к наведенному в течение определенного промежутка времени. Transitions с вендорными префиксами отлично поддерживаются современными браузерами (начиная с IE10 и Firefox 4.0). Используя transitions, можно создавать простые анимации, ограниченные двумя ключевыми кадрами — начальной и конечной точками — и единичным повтором. Большинство разработчиков преодолевают эти ограничения, применяя для анимации JavaScript. С тех пор, как ситуация с поддержкой анимаций CSS3 браузерами улучшилась, пришла пора меньше полагаться на JavaScript и создавать анимацию уже непосредственно в CSS.
 Похожие публикации: CSS, анимация

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]