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

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

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

Safari и Chrome поддерживают альтернативу -WebKit-анимация-свойство animation-name имени.

Внимание!!! Свойство animation-name( анимация-имени) не поддерживается в Internet Explorer 9 и более ранних версий.

Определение и использование. Свойство animation-name указывает имя для анимации @ ключевых кадров.

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


Синтаксис:

          animation-name: keyframename|none|initial|inherit; 

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

Значение по умолчанию: none
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.animationName="myNEWmove"


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

Значение Описание
keyframename Задает имя кадра, который хотите привязать к селектору
none Значение по умолчанию. Указывает, что не будет никакой анимации( может быть использован, чтобы переопределить анимации, поступающих от каскада)
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем программу - Указать имя для анимации @ ключевых кадров:

< !DOCTYPE html>
< html>
< head>
< style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:ad;
animation-duration:5s;

/* Safari и Chrome */
-webkit-animation-name:ad;
-webkit-animation-duration:5s;
}

@keyframes asd
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes ad /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}

< /style>
< /head>
< body>

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

< div>< /div>

< p>< b>Внимание!!!< /b> Всегда указывать анимация-duration. В противном 
случае продолжительность : 0, анимация воспроизводиться не будет.< /p>

< /body>
< /html>                      

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

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

Внимание!!! Всегда указывать анимация-duration. В противном случае продолжительность : 0, анимация воспроизводиться не будет.




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
... ... ...

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

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