переход
Базовый переход, включающий свойства CSS, заключается в определении и перемещении элемента из состояния покоя (например, темно-синего фона) в состояние наведения или активное состояние (например, светло-голубого фона).
Трансформации можно использовать вместе с трансформациями (а также с вызовами таких событий, как :hover или :focus) для создания некоторых анимаций. Уменьшите цвет фона, сдвиньте элемент и поверните объект — и все это с помощью переходов CSS.
Ниже приводится цитируемое содержание: #nav a {background-color:red }; |
Некоторые параметры для преобразования
свойство перехода
Укажите имя свойства CSS преобразования. Например, в приведенном выше примере преобразование применяется к свойству цвета фона.
продолжительность перехода
Определите время, необходимое для преобразования (время, необходимое для изменения старого атрибута на новый атрибут).
функция времени перехода
Можно понимать как чрезмерный эффект. Указывает промежуточное значение во время преобразования. Может быть задано с помощью кубической Безье. Конечно, есть несколько часто используемых встроенных значений: легкость | легкость | легкость выхода |
задержка перехода
Это проще понять, это время задержки преобразования. Время может быть положительным целым числом, отрицательным целым числом или нулем. Если оно не равно нулю, в качестве единицы измерения необходимо указать с (секунды) или мс (миллисекунды). Если это отрицательное число, преобразованное действие будет отображаться из. в этот момент времени, и предыдущее действие будет усечено.
Примечание. Часть параметра была добавлена во время перевода и отсутствует в исходном тексте.
Поддержка браузера
Так же круто, как и атрибут Transform, но в настоящее время поддерживается только браузерами WebKit. -moz-transition уже доступен в последних версиях ночной сборки Firefox 3.7. Вы также можете добавить -moz-transition в свой CSS для будущих улучшений. На всякий случай вы даже можете добавить свойство без префикса Private.
Анимация
Анимация — это то, где CSS 3 наиболее полезен. Вы можете комбинировать все элементы, которые мы обсуждали выше, со свойствами анимации, такими как анимация-длительность, анимация-имя и анимация-тайминг-функция, для создания эффектов, подобных Flash-анимации — чистый CSS.
Ниже приводится цитируемое содержание: #повернуть { |
Этот фантастический код CSS-анимации и онлайн-демо можно увидеть на веб-сайте webkit . Демо-версию можно увидеть на любом веб-сайте, но эффект анимации виден только в версии WebKit для ночной сборки на Mac OS (Snow Leopard). Это выглядит так же, как на видео выше, и если вы используете mac os (версия Snow leopard), я думаю, стоит установить вебкит, чтобы увидеть эффект самостоятельно (это действительно круто). Пользователи системы Windows временно не могут оценить этот эффект.
Некоторые параметры анимации
Параметры анимации чем-то похожи на параметры перевода, поэтому, если вы разбираетесь в параметрах перевода, разобраться здесь не составит труда.
имя-анимации
Название анимации.
продолжительность анимации
Определите время, необходимое для однократного воспроизведения анимации. По умолчанию — 0;
функция синхронизации анимации
Определите способ воспроизведения анимации. Настройки параметров аналогичны функции времени перехода.
задержка анимации
Определите, когда начинается анимация
количество итераций анимации
Определите количество циклов: бесконечное означает неограниченное количество раз. Значение по умолчанию — 1.
-webkit-animation-direction
Направление воспроизведения анимации, два значения, по умолчанию — нормальное. В это время каждый цикл анимации будет воспроизводиться вперед. Другое значение — чередование, тогда четные моменты будут воспроизводиться вперед, а нечетные — в обратном направлении.
Поддержка браузера
К сожалению, в настоящее время лишь несколько браузеров поддерживают анимацию CSS. 2D-анимация CSS работает в Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira и других браузерах Webkit. Safari 4 (Snow Leopard) поддерживает 3D-анимацию.