transition-property | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Главная » Справочник CSS3 » Свойства перехода


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


transition-property | Свойство CSS

Свойство transition-property устанавливает свойство для анимированного перехода.




Свойство transition-property устанавливает свойство для анимированного перехода,например для ширины указывается свойство width.Это обязательное свойство перехода!Если его не указать,то переход будет действовать на все свойства.Существует ещё одно обязательное свойство без указания которого переход не начнётся transition-duration,устанавливающего длительность анимации.Установленных значений может быть несколько,при таких условиях прописывайте значения через запятую.Существуют альтернативные свойства для браузеров.Для Mozila -moz-transition-property,для Safari и Chrome -webkit-transition-property,а для Opera -o-transition-property.Свойство применимо ко всем элементам и псевдоэлементам :before и :after,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




Дополнительные свойства применяемые к transition-property


Свойство
Описание
-moz-transition-propertyАльтернативное свойство для браузера Mozila
-webkit-transition-propertyАльтернативное свойство для браузеров Safari и Chrome
-o-transition-propertyАльтернативное свойство для браузера Opera

Дополнительные значения применяемые к transition-property


Значение
Описание
noneАнимированного перехода не произойдёт
allАнимированный переход будет действовать на все свойства,сопоставимо отсутствию свойства
<Свойство>Анимированный переход будет указан для указанного свойства

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство transition-property</title>
<style type="text/css">
<!--
div#height {
width:99%;
height:50px;
background:red;
border:5px double black;
font-weight:bold;
color:white;
text-decoration:blink;
transition-property:height;
transition-duration:3s;
-moz-transition-property:height;
-moz-transition-duration:3s;
-webkit-transition-property:height;
-webkit-transition-duration:3s;
-o-transition-property:height;
-o-transition-duration:3s;
}
div#weight {
width:99%;
height:50px;
background:black;
border:5px double red;
font-weight:bold;
color:white;
text-decoration:blink;
transition-property:width;
transition-duration:3s;
-moz-transition-property:width;
-moz-transition-duration:3s;
-webkit-transition-property:width;
-webkit-transition-duration:3s;
-o-transition-property:width;
-o-transition-duration:3s;
}
div#weight:hover {
width:150px;
}
div#height:hover {
height:200px;
}
-->
</style>
</head>
<body>
<center>
<div id="weight">Для ширины</div><br>
<div id="height">Для высоты</div>
</center>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-transitions/#transition-property
Категория: Свойства перехода | Добавил: IZOTOP (30.05.2012) | Автор: Меренков Михаил E W
Просмотров: 953 | Теги: css, свойство, transition-property, пример, style | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]