Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - animation-fill-mode.

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Внимание!!! Свойство анимации заполнения и режима animation-fill-mode поддерживается в Internet Explorer 10, Firefox, и Opera. Свойство анимация заполнения и режима( animation-fill-mode) не поддерживается в Internet Explorer 9 и более ранних версий.

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

Самое мощное здесь даже не в том, что производится некое оживление некого участка страницы сайта. Самое мощное здесь в том, что функция animation-fill-mode, которая действует через стили CSS3 самостоятельно работает даже при отключения JavaScripta в браузере Вашего компьютера, то есть Вам не надо заморачиваться: будет работать эта функция в том или ином случае на страницах посетителей?


Определение и Использование

Значение по умолчанию: наследование: нет
Версия: CSS3
синтаксис JavaScript: "объект".style.animationFillMode="вперед"


Свойства Значений

Значение Описание
none по умолчанию. Анимация не будет применять любые стили для целевого применеия до или после того, как она выполняется
forwards После того, как заканчивается анимация( определяется анимация-итерации счетчика), анимация будет применять значения анимации закончившейся
backwards анимация будет применять свойство значения, определенные в кадре при старте первой итерации анимации, во время выполнения определяется анимация-delay. Они являются либо значением от кадра(если анимация-направление "нормальный" или "альтернативный") или к ключевому кадру(если анимация-направление "обратный" или "наоборот")
both анимация будет следовать правилам вперед и назад, это продлит свойства анимации в обоих направлениях
initial определяет это свойство в значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Синтаксис:

            animation-fill-mode: none|forwards|backwards|both|initial|inherit;

Пишем программу - Анимация движения квадрата от одного места в другое, чтобы он там и остался. Для просмотра просто обновляйте страницу:

< !DOCTYPE html>
< html>
< head>
< style> 
div
{
width:100px;
height:100px;
background: #F9C;
position:relative;
animation:mymove 3s;
animation-iteration-count:2;
animation-fill-mode:forwards;

/* Safari и Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:2;
-webkit-animation-fill-mode:forwards;
}

@ keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@ -webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
< /style>
< /head>
< body>

< p>< strong>Внимание!!!< /strong> Свойство анимация-fill-mode не 
поддерживается в Internet Explorer 9 и более ранних версий.< /p>

< div>< /div>

< /body>
< /html>                      

Результат программы:

Внимание!!! Свойство анимация-fill-mode не поддерживается в Internet Explorer 9 и более ранних версий. Для просмотра просто обновляйте страницу.



seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: