Переходы CSS3 позволяют вам перейти с первого стиля на второй в течение заданного периода времени. Чтобы создать оригинальный переход, вам нужно определить свойство на стилях CSS, для которого и создается этот оригинальный эффект, и количество времени, что потребуется для изменения в секундах. Затем вы устанавливаете новое значение для свойств, что будет изменяться на селекторе. Это лучше всего продемонстрировать на примере.
Вставьте этот код в тело вашего html:
Код
<div id="fade">ZorNet: Создание сайта на uCoz</div>
CSS
Этот код css заставит весь #fade div исчезать до нуля, когда он зависает:
Код
#fade{
opacity: 1;
-webkit-transition: opacity 1s linear;
}
#fade:hover{
opacity: 0;
}
Благодаря свойствам и свойствам прозрачности webkit CSS3, легко дублировать эффекты JavaScript и jQuery с помощью CSS. Определяя параметры свойства -webkit-transition для прозрачности 1s linear, мы определяем, какое свойство переходит в не прозрачность, как долго (1s) и будет ли переход изменять скорость на протяжении всей продолжительности. Простота этого кода делает CSS3 реальным конкурентом jQuery с точки зрения создания такого эффекта затухания.
Демонстрация:
