Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Ключевые кадры

.

Ключевые кадры

Чтобы анимировать элемент CSS, вы предварительно должны создать поименованный сценарий анимации, а затем присоединить его к блоку декларации свойств элемента. Сама по себе анимация ничего не делает; чтобы она заработала, ее обязательно надо связать с элементом.

Для создания анимации используйте селектор @ keyframes (@-webkit-keyf rames для существующей реализации в WebKit), после которого следует указать любое слово, которое будет идентификатором этой анимации. Далее перечислите ваши ключевые кадры.

Для анимации myAnimation это будет выглядеть следующим образом:

Ключевые кадры

Каждый ключевой кадр по отдельности выглядит как отдельная декларация CSS. Здесь не используются селекторы; вместо них — ключевые слова from или to, значение в процентах или список из значений в процентах, разделенных запятыми. Этим самым определяется положение ключевого кадра на шкале времени.

Внутри каждого ключевого кадра укажите желаемое свойство и его значение. Значения между ключевыми кадрами браузер вычислит на основе интерполяции.

Ключевые кадры могут быть указаны в любом порядке; для анимации имеет значение только указанное положение на шкале времени, а вовсе не порядок перечисления.

Вот несколько простых примеров:

Ключевые кадры

На последней анимации стоит остановиться: мы применяем один и тот же стиль к точкам 0 и 100%, а другой — к точкам 20 и 80%. В данном случае это означает, что сначала элемент будет невидимым (opacity: 0;), постепенно станет видимым на точке 20% и будет оставаться видимым до 80%, затем исчезнет.

Мы создали три анимации, но они не присоединены к элементам. Следующий шаг — приложить созданные сценарии к одному или нескольким элементам, используя особые свойства.


.

Читайте так же:
Not found