Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
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 - transition-property.

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

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

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

Определение и использование. Свойство transition-property задает имя свойства CSS эффекта перехода. Эффекты перехода происходят, когда пользователь наведите курсор на элемент. Внимание!!! Всегда указывайте продолжительность, в противном случае продолжительность равна 0, и переход не будет иметь никакого эффекта.

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

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

Синтаксис:

             transition-property: none|all|property|initial|inherit;

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

Значение по умолчанию: all
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.transitionProperty="width,height"

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

Значение Описание
none Свойство не получит эффекта перехода.
all Значение по умолчанию. Все свойства получат эффект перехода.
property Определяет разделенный запятыми список имен свойств CSS переходного эффекта.
initial Это свойство задает значение по умолчанию.
inherit Наследует свойство от своего родительского элемента.

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

< !DOCTYPE>
< html>
< head>
< style> 
div
{
width:120px;
height:50px;
background:#F7C;
transition-property: width;
transition-duration: 3s;
-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 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
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: