Transition css3 примеры. CSS3 - переходы
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser.
CSS transitions let you decide which properties to animate (by listing them explicitly ), when the animation will start (by setting a delay) , how long the transition will last (by setting a duration ), and how the transition will run (by defining a timing function , e.g. linearly or quick at the beginning, slow at the end).
Which CSS properties can be transitioned?
The Web author can define which property has to be animated and in which way. This allows the creation of complex transitions. As it doesn"t make sense to animate some properties, the list of animatable properties is limited to a finite set.
Note: The set of properties that can be animated is changing as the specification develops.
The auto value is often a very complex case. The specification recommends not animating from and to auto . Some user agents, like those based on Gecko, implement this requirement and others, like those based on WebKit, are less strict. Using animations with auto may lead to unpredictable results, depending on the browser and its version, and should be avoided.
Defining transitions
CSS Transitions are controlled using the shorthand transition property. This is the best way to configure transitions, as it makes it easier to avoid out of sync parameters, which can be very frustrating to have to spend lots of time debugging in CSS.
You can control the individual components of the transition with the following sub-properties:
(Note that these transitions loop infinitely only for the purpose of our examples; CSS transition s only visualize a property change from start to finish. If you need visualizations that loop, look into the CSS animation property.)
transition-property Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual. transition-duration Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.transition-duration: 0.5s
transition-duration: 1s
transition-duration: 2s
transition-duration: 4s
Specifies a function to define how intermediate values for properties are computed. Timing functions
determine how intermediate values of the transition are calculated. Most timing functions can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. You can also choose easing from Easing Functions Cheat Sheet .
transition-timing-function: ease
transition-timing-function: linear
transition-timing-function: step-end
transition-timing-function: steps(4, end)
transition-delay: 0.5s
transition-delay: 1s
transition-delay: 2s
transition-delay: 4s
The shorthand CSS syntax is written as follows:
Div {
transition:
Examples
Simple example
This example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:
#delay { font-size: 14px; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; } #delay:hover { font-size: 36px; }
Multiple animated properties example
HTML Content
The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.
CSS Content
.box { border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000FF; transition: width 2s, height 2s, background-color 2s, transform 2s; } .box:hover { background-color: #FFCCCC; width: 200px; height: 200px; transform: rotate(180deg); }When property value lists are of different lengths
If any property"s list of values is shorter than the others, its values are repeated to make them match. For example:
Div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s; }
This is treated as if it were:
Div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s, 3s, 5s; }
Similarly, if any property"s value list is longer than that for transition-property , it"s truncated, so if you have the following CSS:
Div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; }
This gets interpreted as:
Div { transition-property: opacity, left; transition-duration: 3s, 5s; }
Using transitions when highlighting menus
A common use of CSS is to highlight items in a menu as the user hovers the mouse cursor over them. It"s easy to use transitions to make the effect even more attractive.
Before we look at code snippets, you might want to take a look at the live demo (assuming your browser supports transitions).
First, we set up the menu using HTML:
Then we build the CSS to implement the look and feel of our menu. The relevant portions are shown here:
A { color: #fff; background-color: #333; transition: all 1s ease-out; } a:hover, a:focus { color: #333; background-color: #fff; }
This CSS establishes the look of the menu, with the background and text colors both changing when the element is in its :hover and :focus states.
JavaScript examples
Care should be taken when using a transition immediately after:
- adding the element to the DOM using .appendChild()
- removing an element"s display: none; property.
This is treated as if the initial state had never occurred and the element was always in its final state. The easy way to overcome this limitation is to apply a window.setTimeout() of a handful of milliseconds before changing the CSS property you intend to transition to.
Using transitions to make JavaScript functionality smooth
Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality. Take the following example.
Click anywhere to move the ball
Using JavaScript you can make the effect of moving the ball to a certain position happen:
Var f = document.getElementById("foo"); document.addEventListener("click", function(ev){ f.style.transform = "translateY("+(ev.clientY-25)+"px)"; f.style.transform += "translateX("+(ev.clientX-25)+"px)"; },false);
With CSS you can make it smooth without any extra effort. Simply add a transition to the element and any change will happen smoothly:
P { padding-left: 60px; } #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; }
Detecting the start and completion of a transition
propertyName A string indicating the name of the CSS property whose transition completed. elapsedTime A float indicating the number of seconds the transition had been running at the time the event fired. This value isn"t affected by the value of transition-delay .Internet Explorer пока не поддерживает свойство transition.
Firefox 4 требует приставки -moz-.
Chrome и Safari требуют приставки -webkit-.
Opera требует приставки -o-.
Как это работает?
CSS3 переходы - это эффекты, которые позволяют элементу плавно изменять один стиль на другой.
Чтобы сделать это, вы должны указать две вещи:
- Указать свойство CSS, к которому вы хотите добавить эффект
- Определить продолжительность эффекта.
ПримерЭффект перехода для свойства width, продолжительность: 2 секунды:
|
Замечание: Если свойство duration не указано, плавный переход не произойдет, потому что значение по умолчанию равно 0.
Эффект начнется, когда указанное свойство CSS начнет изменяться. Обычно эффект перехода (плавного изменения CSS свойства) привязывают к моменту, когда пользователь перемещает мышь над элементом:
ПримерУказать:hover для элементов :
Замечание: Когда курсор мыши уходит за пределы области элемента, он плавно изменяется обратно к своему исходному стилю. Несколько ИзмененийЧтобы добавить эффект более чем к одному стилю, укажите несколько свойств, разделяя их запятыми:
|
Свойство CSS Transition нужен для установки анимационного перехода из одного состояния в другое. Анимация работает с помощью псевдоэлементов :hover и :active , т.е. при переходе объекта из одного состояния в другое.
Синтаксис CSS transition
transition : [ none |] || || || ;
Синтаксис выглядит довольно устрошающе, но по факту все просто. Давайте разберем на простых примерах как это работает. После двух примеров будут разобраны все каждого из элемента синтаксиса:
Примеры со свойством Transition
Пример #1. Анимация в html через transition
Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:
Код transition: all 1s linear означает следующее:
Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform .
Пример #2. Увеличение объекта в html без смещения других объектов
На странице преобразуется в следующее
Теперь объект увеличивается и не происходит смещения других объектов.
Рассмотрим детально какие значения может принимать каждый из параметров
Значения свойств transition
1. Параметр transition-property
Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения
- all - ко всему объекту (можно опустить, если задано время)
- color - к цвету текста
- background - к цвету фона объекта
- width , height - к изменению габаритов по ширине и высоте соответственно
- none - анимация отсутствует (по умолчанию стоит у каждого элемента)
Для включения нескольких свойств, их можно перечислить через запятую.
2. Параметр transition-duration
Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).
Например
Параметр transition-duration можно задавать отдельным свойством в CSS:
transition-duration : 1s ;
3. Параметр transition-timing-function
Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.
Синтаксис transition-timing-functiontransition-timing-function : value ;
Где value может принимать значения:
- ease (значение по умолчанию) - замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
- linear - равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
- ease-in - замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
- ease-out - замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
- ease-in-out - замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
- step-start - мгновенный старт, равносильно параметру steps(1, start)
- step-end - мгновенное исполнение в конце, равносильно параметру steps(1, end)
- cubic-bezier(a1,b1,a2,b2) - задание собственного изменения скорости
- steps(a,b) - изменение рывками
Например
4. Параметр transition-delay
Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)
Например
Пример #3. Разные задержки
Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.
На странице преобразуется в следующее
Пример сложной трансформации с задержками
БраузерыНе все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS :
- -ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
- -webkit-transform-origin - для Chrome, Safari, Android и iOS
- -o-transform-origin - для Opera до версии 12.10
- -moz-transform-origin - для Firefox до версии 16.0
Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:
document.getElementById("elementID").style.transition
Добавление в CSS псевдоклассов сделало жизнь легче для всех веб-разработчиков. Теперь они могут создавать интерактивные эффекты с помощью псевдоклассов:hover и:focus, не прибегая к использованию сценариев JavaScript. Например, чтобы создать меняющуюся кнопку (т.е. кнопку, реагирующую на наведение курсора мыши), достаточно просто предоставить набор новых свойств стиля для псевдокласса:hover. Эти свойства задействуются автоматически, когда пользователь наводит курсор на кнопку.
Какими бы не были псевдоклассы замечательными, они больше не являются передовой технологией. Проблема с ними состоит в их характере типа "все или ничего". Например, настройки стиля псевдокласса:hover активируются сразу же при наведении курсора на элемент, т.е. происходит резкий скачок из одного стиля в другой. А вот в приложениях Flash, Silverlight или в прикладных программах эффект обычно более утонченный. Здесь кнопка при наведении курсора может менять цвет, сдвигаться или подсвечиваться, но делается это с использованием тонкой анимации, занимающей долю секунды.
Некоторые веб-разработчики начинают использовать подобные эффекты в своих работах, но для этого обычно требуется прибегать к помощи системы анимации JavaScript от сторонних разработчиков. А теперь CSS3 предоставляет им более простой способ - новую возможность переходов, позволяющую осуществлять плавный переход от одного набора стилей к другому.
Простой цветовой переход
Чтобы понять принцип работы переходов, нужно рассмотреть реальный пример. Такой пример показан на рисунке ниже, где изменение цвета кнопки при наведении на нее курсора осуществляется с помощью возможностей перехода CSS3:
Если бы это была обычная меняющаяся кнопка, при наведении курсора ее цвет бы менялся с зеленого на желтый резким прыжком. Но при использовании эффекта перехода зеленый цвет переходит в желтый плавно, занимая около полсекунды. Таким же образом происходит и обратный переход при отодвигании курсора. В результате получаем более изящную кнопку.
Смену цвета без эффекта перехода можно реализовать следующим кодом:
SlickButton { color: white; font-weight: bold; padding: 10px; margin: 20px; border: solid 2px gray; background: lightgreen; cursor: pointer; } .slickButton:hover { color: black; background: yellow; }
А этот код создает кнопку, которая форматируется только что описанным стилем:
Чтобы получить плавное изменение цвета, т.е. переход, нам нужно в только что описанный стиль добавить свойство transition . (Обратите внимание, что это свойство вставляется в обычный стиль (в данном случае стиль slickButton), а не в псевдокласс:hover.)
Как минимум, свойство transition требует установки двух значений: свойства CSS, которое нужно анимировать, и времени, на протяжении которого нужно выполнить изменение стилей. В данном примере переход применяется к свойству background, а время перехода равно 0.5 секунды:
SlickButton { /* ... */ -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; }
Как вы, несомненно, заметили, в предыдущем коде в стиль были добавлены три свойства transition, вместо обговариваемого одного. Это потому, что стандарт переходов CSS3 все еще находится в процессе разработки и поддерживающие его браузеры требуют применения префиксов разработчиков. Таким образом, чтобы переход работал в браузерах Chrome, Safari, Firefox и Opera, нужно установить три значения свойства transition, добавляя к каждому из них свой префикс разработчика. А для Internet Explorer 10 (который, как ожидается, будет поддерживать переходы) нужно будет добавить еще одну версию свойства, с префиксом -ms-. К сожалению, использование экспериментальных свойств может породить неопрятные таблицы стилей.
Так, в данном примере присутствует один мелкий недостаток, а именно, в активированной кнопке меняются два элемента оформления - цвет самой кнопки и цвет текста на ней. Но эффект перехода применяется только к цвету фона кнопки, в результате чего смена цвета текста происходит мгновенно, в то время как цвет фона кнопки меняется постепенно.
Эту проблему можно решить двумя способами. При первом подходе свойству transition присваивается список переходов, разделенных запятыми:
SlickButton { /* ... */ -webkit-transition: background 0.5s, color 0.5s; -moz-transition: background 0.5s, color 0.5s; -o-transition: background 0.5s, color 0.5s; }
Но этот код можно сократить, если нам нужно установить переход для всех изменяющихся свойств и при одинаковом времени перехода для них всех. В таком случае вместо списка свойств для перехода мы просто используем ключевое слово all :
SlickButton { /* ... */ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
На момент написания этих строк переходы поддерживались браузерами начиная с Opera 10.5 и Firefox 4, а также всеми версиями Safari и Chrome, с которыми вам когда-либо приходилось работать. Браузер Internet Explorer поддерживает переходы начиная с версии 10. Отсутствие поддержки переходов - не такая и большая проблема, как может показаться, т.к. браузер все равно меняет стили. Только эта смена происходит почти мгновенно, а не с растянутым во времени переходом. А это уже хорошая новость, т.к. веб-сайт может использовать переходы и в то же самое время сохранять основные визуальные стили для старых браузеров.
Задержка и комбинирование эффектов перехода
В эффектах перехода можно использовать свойство transition-delay , которое задерживает начало перехода на указанное время:
SlickButton { /* ... */ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; transition-delay: 2s; }
Теперь анимация перехода при наведении указателя мыши будет задерживаться на две секунды. То же самое произойдет и при отведении указателя мыши. Значение свойства transition-delay можно указывать в самом свойстве transition, как необязательный параметр:
SlickButton { /* ... */ -webkit-transition: all 0.5s 2s; -moz-transition: all 0.5s 2s; -o-transition: all 0.5s 2s; transition: all 0.5s 2s; }
Этот код аналогичен предыдущему. Спецификация CSS3 позволяет комбинировать несколько эффектов перехода (с разной длительностью), как это было продемонстрировано с кнопкой. Вместо указания всех подробностей перехода в одном свойстве transition, можно использовать свойства transition-property (для указания анимируемого свойства) и transition-duration (для указания задержки):
SlickButton { /* ... */ /* Устанавливаем видоизменяемые свойства */ -webkit-transition-property: opacity, scale, background, color; -moz-transition-property: opacity, scale, background, color; -o-transition-property: opacity, scale, background, color; transition-property: opacity, scale, background, color; /* Устанавливаем время анимации */ -webkit-transition-duration: 2s, 1.6s, 1s, 1s; -moz-transition-duration: 2s, 1.6s, 1s, 1s; -o-transition-duration: 2s, 1.6s, 1s, 1s; transition-duration: 2s, 1.6s, 1s, 1s; } .slickButton:hover { color: black; background: yellow; opacity: .4; -webkit-transform: scale(1.2,1.2); -moz-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); transform: scale(1.2,1.2); }
Это правило гораздо сложнее рассмотренных ранее. Во-первых здесь мы анимируем сразу 4 свойства указанные в transition-property. Во-вторых одним из анимируемых свойств является трансформация масштаба, которая позволяет при наведении курсора мыши на кнопку плавно увеличить ее в размерах, создавая очень красивый эффект.
Использование функций замедления
Переход можно настроить более тонко. Для этого можно использовать свойство transition-timing-function , которое позволяет изменять скорость перехода в процессе его осуществления. Например, начало перехода может быть медленным с последующим ускорением, или наоборот, быстрый переход в начале и замедленный в конце. Для коротких переходов это свойство не играет большой роли. Но в длинных и более сложных анимациях оно может изменить общее восприятие эффекта.
Функции замедления не являются каким-то инновационным средством CSS3, они уже давно используются в WPF и Silverlight (Инерционность движения).
Свойство transition-timing-function использует функцию cubic-bezier() для задания функции замедления через кривую Безье. Кривая Безье определяется двумя точками: начальное смещение и конечное смещение. Чтобы понять это давайте рассмотрим пример определения простой кривой Безье:
Transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
Этой функции соответствует следующий график:
Как видите здесь две точки с координатами (0.42, 0) и (0.58, 1) задают вид кривой Безье. Если вы укажите данную функцию замедления в предыдущем примере, то все эффекты перехода будут сначала выполняться чуть медленее, потом скорость будет больше и в конце перехода скорость снова уменьшится (согласно графику).
Понимание логики построения кривых Безье позволяет создавать практически бесконечное разнообразие пользовательских функций смягчения для анимаций CSS3. Есть даже возможность задавать отрицательные значения или значения, превышающие 1, для создания чрезвычайно кривых смягчений, например:
Transition: all 2000ms cubic-bezier(0.280, -0.315, 0.685, 1.390);
Опробуйте этот эффект на примере кнопки, гарантирую, результат вам понравиться.
В свойстве transition-timing-function можно использовать несколько стандартных значений, которые определяют некоторые значения функции cubic-bezier.
Дата добавления: 2011-10-16
Свойство transition относится к новым свойствам CSS3. Познакомимся с ним поближе.
Все мы привыкли, что при наведении мышкой изменяется цвет ссылки. При этом цвет меняется резко, без плавного перехода. Свойство transition позволит добавить небольшую анимацию при изменении цвета без использования JavaScript.
В спецификации к данному свойству говорится следующее:
CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.
Иными словами, CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.
Применять свойство transition можно к чему угодно - фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы:focus и:active.
Браузеры
Сразу скажу о браузерах - новый стандарт еще не принят, поэтому на данный момент необходимо использовать префиксы -webkit-, -moz- и -o-. Отсюда видно, что свойство поддерживают браузеры Chrome, Safari, Opera 10.5+, Firefox 4+. Наш "любимый" Internet Explorer как всегда не у дел, пользователь просто не увидит никакой анимации.
В этой статье я использовал префикс -webkit- , поэтому все приведенные здесь примеры будут работать только в Chrome и Safari.
Рассмотрим простой пример - добавим плавный переход фона ссылки
Для начала вспомним, как делается обычная смена цвета ссылки при наведении мышкой.
Теперь воспользуемся свойством CSS transition для плавной смены фона у ссылки. Создадим новый класс, который будет идентичен классу simple и добавим несколько новых строчек:
A.cool { padding: 5px 10px; background: #69f; color: #000; -webkit-transition-property: background; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease; } a.cool:hover { background: #33f; color: #fff; }
Создаем еще пару тестовых ссылок и посмотрим на результат:
Теперь наш фон плавно меняет цвет в течение полусекунды! Из примера видно, что мы добавили три новые строчки со свойствами -webkit-transition-property, -webkit-transition-duration, -webkit-transition-timing-function .
На самом деле, их можно объединить в одно свойство:
Webkit-transition: background 0.5s ease;
Также можно добавить плавное изменение цвета текста:
A.cool2 { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: background 0.5s ease, color 1.0s ease; } a.cool2:hover { background: #33f; color: #fff; }
Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 1 секунды. Проверяем:
Если мы будем использовать одинаковые параметры для анимации, то можно использовать выражение: -webkit-transition: all 0.5s ease;
Теперь Transition-эффект будет применяться ко всем изменяющимся свойствам с одинаковыми параметрами - 0.5 секунд, ease-эффект.
Можно также добавить задержку для эффекта при помощи transition-delay :
A.cool3 { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: all 0.5s ease; -webkit-transition-delay: 0.5s; } a.cool3:hover { background: #33f; color: #fff; }
Теперь анимация будет работать через полсекунды после наведения мышки. Проверим на всякий случай:
Справочная таблица
Чтобы лучше усвоить материал, предлагаю вашему вниманию небольшую справочную таблицу.
Transition-property Свойство, к которому применяем анимацию. Практически любое свойство CSS: color, background, width, font-size и т.д. transition-duration Длительность анимации. Время в секундах. transition-timing-function Временная функция, используемая для анимации: ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier transition-delay Задержка анимации. Время в секундах.
