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


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

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

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

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

Внимание!!! Свойство transition переход не поддерживается в IE9 и более ранних версий.

Определение и использование. Свойство transition является обобщающим для четырех свойств с переходной: transition-property, transition-duration, transition-timing-function, and transition-delay. Внимание!!! Всегда указывайте продолжительность трансформации( анимации), иначе при значении времени равным s0 переходf не будет.

Таким образом, Свойство transition задает эффект перехода между двумя состояниями выбранного элемента, они могут быть определены с помощью псевдоэлемента :hover или :active или динамически определяться через JavaScript.

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


Синтаксис:

           transition: property duration timing-function delay|initial|inherit;

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

Default value: all 0 ease 0
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.transition="all 2s"


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

Значение Описание
transition-property Задает имя CSS-свойство переходного эффекта
Указывает сколько секунд или миллисекунд эффект перехода, необходимое для выполнения
transition-timing-function Задает скорость кривой эффект перехода
transition-delay Определяет, когда начнется эффект перехода
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем программу:

< !DOCTYPE>
< html>
< head>
< style> 
div
{
width:120px;
height:50px;
background:#F7C;
transition:width 3s;
-webkit-transition:width 3s; /* Safari */
}

div:hover
{
width:550px;
}
< /style>
< /head>
< body>

< p>< b>Внимание!!!< /b> Этот пример не работает в IE9 и более ранних версий.< /p>

< div>< /div>

< p>Наведите указатель мыши на элемент div, чтобы увидеть эффект перехода.< /p>

< /body>
< /html>                     

Результат программы:

Внимание!!! Этот пример не работает в IE9 и более ранних версий.

======================================================================================

Наведите указатель мыши на элемент div, чтобы увидеть эффект перехода.

плавная смена
цвета туда-обратно



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