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

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

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

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

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

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

Свойства анимации

.

Свойства анимации

Браузер WebKit поддерживает следующие свойства анимации с префиксом -webkitvendor.

animation-name

Это свойство используется для связывания элемента со сценарием анимации (определенным при помощи @keyframes):

-webkit-animation-name:   ‘appear’;

Кавычки как здесь, так и в селекторе @keyframe не обязательны. Мы рекомендуем их использовать для поддержания единого стиля и во избежание конфликтов.

animation-duration

Продолжительность анимации в секундах или миллисекундах, от 0 до 100%:

-webkit-animation-duration:  300ms; animatіon-timing-function

Тут все очень похоже на transition-timing-function, и назначение animat ion-timing-function идентичное: определить, с какой скоростью будет воспроизводиться ролик. Опции те же самые: ease, linear,  ease-in,  ease-out,  ease-in-out и cubic-bezier:

-webkit-animation-timing-function:  linear; animation-iteration-count

Это свойство определяет, сколько раз должен воспроизводиться ролик. Значением обычно является целое число, но может быть и десятичная дробь (тогда воспроизведение остановится на полдороге), или ключевое слово infinite (тогда анимация будет проигрываться бесконечно). Когда значение опущено, по умолчанию оно считается равным 1, т.е. анимация должна проигрываться один раз:

-webkit-animation-iteration-count:  infinite; animation-direction

Когда анимация имеет больше одной итерации, вы можете использовать это свойство со значением alternate для того, чтобы каждый второй цикл воспроизводился в обратном направлении. Например, если в вашем ролике прыгает мяч, вы можете создать ключевые кадры для падающего мяча, а потом использовать свойство animation-direction :  alternate;, чтобы после падения мяч отскакивал:

-webkit-animation-direction: alternate;

Значение по умолчанию -normal, это значит, что каждая итерация проигрывается от начала к концу.

Если анимация запускается в обратном направлении, функции управления скоростью тоже реверсируются; например ease-in становится ease-out.

animation-delay

Это свойство определяет, на сколько секунд или миллисекунд браузер должен задержать начало воспроизведения анимации:

-webkit-animation-delay:   15s; animation-fill-mode

Это свойство определяет, будет ли видимым эффект от анимации, когда сама анимация закончится. По умолчанию анимация не оказывает влияния на значения свойств элементов, но с помощью свойства animation-fill-mode это правило можно изменить.

Допустимые значения: none, forwards , backwards и both. Значение но умолчанию — попе, эффект от анимации будет наблюдаться лишь в течение времени анимации. Если установить значение forwards, эффект от анимации будет виден даже тогда, когда анимация закончилась (после завершения анимации элемент получает не начальные значения, а какие-то промежуточные из анимации). При выборе значения backwards начальный ключевой кадр анимации будет отображаться в течение всего времени задержки анимации (имеет смысл применять только к анимациям с ненулевой задержкой). И, как и следует ожидать, both совмещает эффекты forward и backward:

-webkit-animation-fill-mode:   forwards; animation-play-state

Это свойство определяет, должна ли анимация воспроизводиться. Остановленная анимация отображается статическим кадром. Когда остановленная анимация возобновляется, воспроизведение начинается с места остановки. Это свойство обеспечивает простой способ управления анимацией из сценариев JavaScript.

.

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