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


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

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

Определение и использование. С правилами @ ключевых кадров, вы можете создавать анимацию. Анимация создается, постепенно меняется от одного набора стилей CSS к другому. Во время анимации, можно изменить набор стилей CSS много раз. Укажите, когда изменение произойдет в процентах, или ключевые слова "от" и "до", что то же самое, как 0% и 100%. 0% является началом анимации, 100%, когда завершения анимации. Для лучшей поддержки браузера, вы всегда должны определить и 0% и 100% селекторы. Внимание!!! Используйте свойства анимации для управления внешним видом анимации, а также привязывайте анимацию селекторов.

Крайне интересное и полезное тут не в том, что совершается какое-то изменение какого-то участка( тега) страницы сайта. Вся удивительная и необходимая информация состоит в том, что свойство keyframes3, которое действует через стили CSS3 самостоятельно и независимо работает даже при отключения JavaScripta в браузере Вашего компьютера. Вам не надо гадать: будет работать - не будет работать.


ПРИМЕР
                      < !DOCTYPE html>
                      < html>
                      < head>
                        < style> 
                           div #animazija3
                                 {
                             width:100px;
                             height:100px;
                             background:red;
                             position:relative;
                             animation:mymove 5s infinite;
                            -webkit-animation:mymove 5s infinite;
                                     /* Safari and Chrome */
                                  }
                          @ keyframes mymove
                                {
                          0%   {top:0px; background:red; width:100px;}
                        100% {top:200px; background:yellow; width:300px;}
                                 }
                          @ -webkit-keyframes mymove 
                                    /* Safari and Chrome */
                             {
                          0%   {top:0px; background:red; width:100px;}
                        100% {top:200px; background:yellow; width:300px;}
                                  }
                      < /style>
                    < /head>
                    < body>
                        < p>Примечание: @ keyframes  
                                 не поддерживаются в Internet Explorer 9 
                                              и более ранних версий.< /p>

                       < div id="animazija3">< /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
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: