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

январь 2021
Пн Вт Ср Чт Пт Сб Вс
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 29 30 31


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

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

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

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

Внимание!!! Тег animation-direction не поддерживается в Internet Explorer 9 и более ранних версий.

Определение и использование. Свойство animation-direction пказывает, должна ли анимация воспроизводиться в обратном порядке на чередующихся( четных) циклах воспроизведения. Если анимация установлена и воспроизводится только один раз, это свойство не будет иметь никакого эффекта. Таким образом, свойство animation-direction определяет то, что требуется ли проигрывать анимацию на страницах сайта в обратном направлении( можно указать несколько значений через запятую). Если требуется, то все нечетные циклы проигрывают анимацию в прямом направлении, а все четные циклы исполняются в обратном напрвлении.

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

Синтаксис:

               animation-direction: value;

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

Значение по умолчанию: нормальный
наследование: нет
Версия: CSS3
JavaScript синтаксис: object.style.animationDirection="alternate"

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

Значение Описание Начать
normal Значение по умолчанию. Анимация должна будет воспроизводиться как обычно
reverse Анимация должна воспроизводиться в обратном направлении
alternate Анимация будет воспроизводиться как обычные на каждое нечетное время (1,3,5,и т.д..) и в обратном направлении все еще раз (2,4,6,и т.д...)
alternate-reverse Анимация будет воспроизводиться как обычные на каждое нечетное время (1,3,5,и т.д..) и в обратном направлении все еще раз (2,4,6,и т.д...)

ПРИМЕР

Напишем коды программы для анимации с изменением направления движения рисунка:

                     < !DOCTYPE html>
                     < html>
                     < head>
                        < style> 
                          div #animation_du
                                  {
                          width:100px;
                          height:100px;
                          background:red;
                          position:relative;
                          animation:myfirst 5s infinite;
                          animation-direction:alternate;
                             /* Safari and Chrome */
                         -webkit-animation:myfirst 5s infinite;
                         -webkit-animation-direction:alternate;
                                   }
                        @ keyframes myfirst
                                   {
                       0%   {background:red; left:0px; top:0px;}
                      25%  {background:yellow; left:200px; top:0px;}
                      50%  {background:blue; left:200px; top:200px;}
                      75%  {background:green; left:0px; top:200px;}
                     100% {background:red; left:0px; top:0px;}
                                   }
                       @ -webkit-keyframes myfirst /* Safari and Chrome */
                                      {
                       0%   {background:red; left:0px; top:0px;}
                      25%  {background:yellow; left:200px; top:0px;}
                      50%  {background:blue; left:200px; top:200px;}
                      75%  {background:green; left:0px; top:200px;}
                     100% {background:red; left:0px; top:0px;}
                                    }
                       < /style>
                   < /head>
                   < body>
                        < p>Примечание: анимация-свойство 
                               задержки не поддерживаются в Internet Explorer 9 
                                                  и более ранних версий.< /p>
                        < div id="animation_du">< /div>
                   < /body>
                   < /html>

Ниже Вы увидите результат выполнения сценария кодов программы по анимации рисунка:

Примечание: анимация-свойство задержки не поддерживаются в 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
... ... ...

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

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