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

Поддержка браузеров. Поддерживается @keyframes в Интернет эксплорер, Firefox Опера, Google Chrome, Сафари.

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

Внимание!!! Правило @keyframes не поддерживается в Internet Explorer 9 и более ранних версий.

Определение и использование. С правилами @keyframes, вы легко и просто можете создавать анимацию. Анимация создается и меняется от одного набора стилей CSS к другому. Во время анимации, можно изменить набор стилей CSS много раз.

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

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

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

Синтаксис


@keyframes animationname {keyframes-selector {css-styles;}}


Значение Описание
animationname Требуется. Определяет имя анимации.
keyframes-selector Требуется. Продолжительность анимации в процентах.

Действительные значения:

0-100%
(так же, как и 0%)
(так же, как 100%)

Примечание: Вы можете иметь много кадр-селекторов в одной анимации..

css-styles Требуется. Одно или более фактических свойств стиля CSS

ПРИМЕР

Составляем коды программ для более или менее ясного понимания сути ключевых правил анимации:

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

И получается у нас следующая анимация c div:

Примечание: @keyframes не поддерживаются в Internet Explorer 9 и более ранних версий.



ПРИМЕР

Напишем еще одну маленькую программу:

                       < !DOCTYPE html>
                       < html>
                       < head>
                       < style> 
                          div #animazija2
                              {
                          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;}
                         25%  {top:200px;}
                         75%  {top:50px}
                        100% {top:100px;}
                                 }
                          @ -webkit-keyframes mymove /* Safari
                                                and Chrome */
                                {
                          0%   {top:0px;}
                         25%  {top:200px;}
                         75%  {top:50px}
                        100% {top:100px;}
                                  }
                      < /style>
                      < /head>
                      < body>
                         < p>Примечание: @кадры правило 
                                 не поддерживаются в Internet Explorer 9 
                                                 и более ранних версий.< /p>
                          < div id="animazija2">< /div>
                     < /body>
                     < /html>

Вот, результат нашей мини-программы:КЛИКНИ СЮДА для просмотра анимации


ПРИМЕР

Вот, еще интересная программа получается для понимания анимации прямоугольника:

                      < !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>Примечание: @кадры правило 
                                 не поддерживаются в Internet Explorer 9 
                                              и более ранних версий.< /p>

                       < div id="animazija3">< /div>

                    < /body>
                    < /html>

Правда интересная картина проявляется. Ведь, тут можно вместо данного прямоугольника поставить любую фигуру или какого-либо животного. Для фантазии сколько тут мест получается: КЛИКНИ СЮДА для просмотра анимации


ПРИМЕР

Напишем еще более сложную и интересную программу для оживления рисунка; смотрите и сравнивайте с кодами программы:

                       < !DOCTYPE html>
                       < html>
                       < head>
                          < style> 
                              div #animazija4
                              {
                           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; left:0px; background:red;}
                     25%  {top:0px; left:100px; background:blue;}
                     50%  {top:100px; left:100px; background:yellow;}
                     75%  {top:100px; left:0px; background:green;}
                    100% {top:0px; left:0px; background:red;}
                              }
                       @ -webkit-keyframes mymove /* Safari and Chrome */
                                  {
                      0%   {top:0px; left:0px; background:red;}
                     25%  {top:0px; left:100px; background:blue;}
                     50%  {top:100px; left:100px; background:yellow;}
                     75%  {top:100px; left:0px; background:green;}
                    100% {top:0px; left:0px; background:red;}
                                 }
                          < /style>
                       < /head>
                       < body>
                        < p>Note: The @keyframes rule  
                                 is not supported in Internet Explorer 9 
                                             and earlier versions.< /p>
                          < div #animazija4>< /div>
                       < /body>
                       < /html>

Вот как можно оживить нашу страницу сайта; творите и создавайте: КЛИКНИ СЮДА для просмотра анимации




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