Авторский знак. 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.

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

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

Внимание!!! Спецификация анимации не поддерживается в Internet Explorer 9 и более ранних версий.

Определение и использование. Спецификация анимации является обобщающим для шести из свойств анимации: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.

Внимание!!! Всегда указывайте в свойстве анимации продолжительность выполнения программы в секцундах( s), в противном случае продолжительность равна 0 сек, и никогда не будет воспроизводится. Это Вы можете проделать чуть ниже. Там привожу несколько примеров с анимацией на страницах сайта. Вместо обычного div элемента Вы можете взять простую картину или фото и прекрасно все это оживить. Получиться забавно. Проэкспериментируйте.

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


Значение по умолчанию: нет 0 простота 0 1 нормально ни начало

Наследование: нет

Версия: CSS3

JavaScript синтаксис: Объект .style.animation = "mymove 5s бесконечный"


Правила @keyframes поддерживается в Internet Explorer 10, Firefox, и Opera. Safari и Chrome поддерживают альтернативу, верховенства @-webkit-keyframes правил.

Внимание!!! Используйте свойства анимации для управления внешним видом анимации, а также привязывать анимации селекторов.


ПРИМЕР

Составим некую программу для оживления рисунка на странице сайта:

                       < !DOCTYPE html>
                       < html>
                       < head>
                         < style> 
                            div #animation
                                 {
                           width:100px;
                           height:100px;
                           background:red;
                           position:relative;
                           animation:mymove 5s infinite;
                          -webkit-animation:mymove 5s infinite;
                               /*Safari and Chrome*/
                               }
                          @k eyframes mymove
                                {
                             from {left:0px;}
                             to {left:200px;}
                                    }
                          @ -webkit-keyframes mymove /*Safari and Chrome*/
                                  {
                            from {left:0px;}
                            to {left:200px;}
                                 }
                        
                      < /head>
                      < body>
                        < p>Примечание: @keyframes 
                                не поддерживаются в Internet Explorer 9 
                                  и более ранних версий.< /p>
                        < div id="animation">< /div>
                      < /body>
                      < /html>

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

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

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

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