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


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



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


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

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




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




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


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

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


Значение
Описание
sЗначение в секундах
msЗначение в миллисекундах

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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство transition-duration</title>
<style type="text/css">
<!--
div {
width:99%;
height:50px;
background:black;
border:5px double red;
font-weight:bold;
color:white;
text-decoration:blink;
}
div#treesekund {
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#onesekund {
transition-property:width;
transition-duration:1s;
-moz-transition-property:width;
-moz-transition-duration:1s;
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-o-transition-property:width;
-o-transition-duration:1s;
}
div:hover {
width:150px;
}
-->
</style>
</head>
<body>
<center>
<div id="treesekund">Действие = 3 секунды</div><br>
<div id="onesekund">Действие = 1 секунда</div>
</center>
</body>
</html>

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




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





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






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

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

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