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


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



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


transition | Свойство CSS

Свойство transition создаёт анимированный переход.




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




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


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

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


Значение
Описание
<Значения свойств>Значения применяемые к расширенным свойствам

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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство transition</title>
<style type="text/css">
<!--
div {
width:99%;
height:100px;
background:black;
border:5px double red;
font-weight:bold;
color:white;
text-decoration:blink;
transition:opacity 5s 1.0 1s;
-moz-transition:opacity 5s 1.0 1s;
-webkit-transition:opacity 5s 1.0 1s;
-o-transition:opacity 5s 1.0 1s;
}
div:hover {
opacity:0.6;
}
div:active {
opacity:0.3;
}
-->
</style>
</head>
<body>
<center>
<div>При наведении мышки блок изменит прозрачность,а при нажатии станет ещё прозрачнее</div>
</center>
</body>
</html>

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




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





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






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

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

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