»

 Будь в курсе событий:

css3 transitions

Введение в CSS3 Transitions
Введение в CSS3 Transitions

На этот раз рассмотрим css3 transitions - анимационные переходы, которые можно использовать для оформления презентаций онлайн, прямо на ваших Jimdo ресурсах.

Введение в CSS3 Transitions

Всем привет и очередной урок от меня. Уже давно не новость, что CSS3 дает нам много возможностей для оформления наших сайтов. Сегодня хочется поговорить про CSS3 переходы - именно так переводится transitions. CSS3 Transitions являются презентационными эффектами, которые позволяют изменять свойства в CSS значениях. Также при помощи CSS3 Transitions можно добиться эффектов плавного изменения объектов в течении определенного времени, а не так, как это обычно происходит - мгновенно. Данные эффекты могут быть применены к широкому спектру свойств CSS.

Это может быть цвет фона (background-color), ширина (width), высота (height), прозрачность (opacity) и многое другое.

В настоящее время модуль CSS3 Transitions находится на этапе развития, так сказать на этапе разработки, поэтому элементы, спецификации и синтаксис все еще подвергаются изменениям. Браузеры уже довольно широко поддерживают CSS3 Transitions, в настоящее время вы можете использовать несколько префиксов поставщиков в коде для кросс-браузерного решения.>

 

Вот простой пример. Боксы ниже изначально имеют оранжевый фон, при наведении - цвет должен измениться на зеленый. Для первого бокса переход не указан, поэтому изменение происходит мгновенно. Для второго окна переход указан с длительностью в 5 секунд, поэтому изменение происходит плавно в течении заданного времени и автоматически возвращает цвет бокса в начальное состояние, когда мышь отводится от элемента.

Пример 1: Перехода нет
Пример 2: Переход 5 секунд

Код примеров будет рассмотрен ниже.

Как работает Transitions

Модуль CSS3 Transitions содержит ряд свойств, которые могут использоваться для указания: свойства CSS (или свойств), продолжительность периода, функцию перехода, и дополнительные задержки.

 

Эти свойства заключаются в следующем:

 

transition-property

transition-duration

transition-timing-function

transition-delay

 

Давайте подробнее рассмотрим каждое свойство перехода.

Шаг 1. Transitions-property

Свойство transition-property задает свойство, для которого будет совершаться анимированный переход (можно указать несколько через запятую). Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

 

Синтаксис:

 

transition-property: none | all | [ <свойство> ] [, <свойство> ]

 

none — анимированный переход совершаться не будет

all — анимированный переход будет совершаться для всех изменяющихся свойств

<свойство> — имя свойства, для которого будет совершаться анимированный переход

 

Примеры:

 

transition-property: all;

 

transition-property: none;


transition-property: background-color;


transition-property: background-color, height, width;

 

То есть, говоря простым языком, здесь мы указываем те свойства, которые будут подвергаться изменениям.

Шаг 2. Transitions-duration

Свойство transition-duration указывает какое количество времени занимает анимированный переход (можно указать несколько через запятую). Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

 

Синтаксис:

 

transition-duration: <time> [, <time>]

 

<time> — точное значение времени перехода. Задается в секундах s или в миллисекундах ms.

 

Примеры:

 

transition-duration: 2s;

 

transition-duration: 4000ms;


transition-duration: 4000ms, 8000ms;

 

Если временное значение задано как ноль, то переход происходит мгновенно. Отрицательные значения будут восприниматься как значение ноль.

Шаг 3: Transition-timing-function

Свойство transition-timing-function описывает метод расчета промежуточных значений свойств при анимированном переходе (можно указать несколько через запятую). Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

 

Синтаксис:

 

transition-timing-function: <timing-function> [, <timing-function>]

 

<timing-function> — ease | linear | ease-in | ease-out | ease-in-out или <timing-function> — cubic-bezier(<номер>, <номер>, <номер>, <номер>)

 

Примеры:

 

transition-timing-function: ease;


transition-timing-function: ease, linear;


transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);

 

Возможные значения свойства представляют собой различные кривые Безье третьего порядка, заданные координатами четырех точек. Координаты начальной точки P0(0;0), координаты конечной точки P3(1;1). Координаты промежуточных точек P1(x1;y1) P2(x2;y2) заданы четырьмя значениями свойства в порядке (x1;y1;x2;y2).

 

Координаты могут принимать значения от 0 до 1:

- ease — кривая Безье 3-го порядка с координатами P1(0.25, 0.1) P2(0.25, 1.0);

- linear — кривая Безье 3-го порядка с координатами P1(0.0, 0.0) P2(1.0, 1.0);

- ease-in — кривая Безье 3-го порядка с координатами P1(0.42, 0) P2(1.0, 1.0);

- ease-out — кривая Безье 3-го порядка с координатами P1(0, 0) P2(0.58, 1.0);

- ease-in-out — кривая Безье 3-го порядка с координатами P1(0.42, 0) P2(0.58, 1.0);

- cubic-bezier (<число>, <число>, <число>, <число>) — кривая Безье 3-го порядка с координатами P1(x1, y1) P2(x2, y2).Где x1,y1,x2,y2 — произвольные значения координат заданные пользователем (в промежутке от 0 до 1).

В приведенном ниже примере показано, как изменяются элементы при использовании различных функций. Каждое поле имеет диапазон трансформации ширины от 150px до 500px, продолжительность перехода задана 3 секунды.

ease
linear
ease-in
ease-out
ease-in-out

Кривые Безье используются в компьютерной графике для рисования плавных изгибов, в CSS-анимации для описания процесса анимации и много где ещё. Ниже вы можете посмотреть как графически изображаются: линейная, квадратичная и 2 кривые высших степеней.


а)

b)

c)

d)


Источник анимационных изображений: ru.wikipedia.org

Шаг 4: Transition-delay

Свойство transition-delay указывает на временную задержку перед анимированным переходом (можно указать несколько через запятую). Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

 

Синтаксис:

 

transition-delay: <time> [, <time>]

 

<значение> — точное значение временной задержки перед переходом. Задается в секундах s или в миллисекундах ms.

 

Примеры:

 

transition-delay: 5s;

 

transition-delay: 4000ms, 8000ms;


transition-delay: -5s;

 

Если задержку перед переходом задать отрицательным значением, то переход происходит немного иначе. Допустим вы задали значение -5s, тогда задержка перехода сдвинется на 5 секунд раньше. Если это сложно укладывается в голове, то вам просто стоит взглянуть на рабочие примеры, расположенные ниже. Своего рода отрицательные значения показывают, на сколько раньше закончится действие перехода.

Шаг 5: Сокращенный Transition

Сокращенный Transition может использовать все вышеперечисленные переходы вместе. Давайте посмотрим на синтаксис. 

 

Синтаксис:


<transition> = <transition-property>  <transition-duration>  <transition-timing-function>  <transition-delay>


Как и в отдельных свойствах переходов, сокращенный переход может быть использован для определения нескольких переходов, ичерез запятую.

 

Примечание: Если указывается единственное значение перехода, то по умолчанию это  transition-delay.

 

Примеры:

 

transition: background-color 3s linear 1s;

 

transition: 4s ease-in-out;


transition: 5s;

Шаг 6: Кроссбраузерная поддержка

Chrome Firefox IE Safari Opera
transition-property 4.0 4.0 10.0 3.1 10.5
transition-duration 4.0 4.0 10.0 3.1 10.5
transition-timing-function 4.0 4.0 10.0 3.1 10.5
transition-delay 4.0 4.0 10.0 3.1 10.5
transition 4.0 4.0 10.0 3.1 10.5
Значения таблицы:

 

# встроенная поддержка свойства (без префикса поставщика), указано начиная с версии браузера


# экспериментальная поддержка свойства (с префиксом поставщика, пр. -webkit-, -moz-), указано начиная с версии браузера


Шаг 7: Рабочие примеры Transitions

Пример А: Transition

Вот пример основного перехода. Пример 1 изначально имеет оранжевый фон, и меняет цвет на зеленый при наведении курсора. Для первого примера переход не указан, поэтому изменение происходит мгновенно. Во втором примере задан переход с длительностью 5 секунд, поэтому изменение происходит плавно с заданной длительностью и автоматически изменяется когда мышь перемещается к элементу.

Пример 1: Перехода нет
Пример 2: Переход 5 секунд

Вот сам код для этого примера:

css
/* Пример 1: Без использования перехода */
#box1{
width:580px;
padding:9px 15px;
background-color:#ED8029;
color:white;
margin-bottom:20px;
margin-top:20px;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}

#box1:hover{
background-color:#A7B526;
}

/* Пример 2: С использованием перехода */
#box2{
width:580px;
padding:9px 15px;
background-color:#ED8029;
color:white;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
/*transition*/
-webkit-transition:background-color 5s;
   -moz-transition:background-color 5s;
     -o-transition:background-color 5s;
        transition:background-color 5s;
}

#box2:hover{
background-color:#A7B526;
}

Обратите внимание на то, что эффект перехода применяется к исходному элементу, а не к элементу наведения hover.

Пример Б: Transition timing functions

Пимер ниже демонстрирует нам, как различные временные функции себя ведут. Каждый блок расширяется по ширине от 150px до 500px. При выполнении перехода сам эффект происходит с первой секунды и длится в течении 3-х секунд.

ease
linear
ease-in
ease-out
ease-in-out

Код для этого примера:

css
/* Оформление оранжевых блоков, при наведении на которые длина блоков изменяется от 150px до 500px */
#ExampleB{
width:520px;
}

#ExampleB div{
width:150px;
margin:5px 0;
padding:5px;
color:white;
background-color:#ED8029;
text-align:right;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}

#ExampleB:hover div{
width:500px;
}

/* Ну а этим кодом мы задаем различные параметры временных функций */
#ExampleB div.ease{
/*transition*/
-webkit-transition:3s ease;
   -moz-transition:3s ease;
     -o-transition:3s ease;
        transition:3s ease;
}

#ExampleB div.linear{
/*transition*/
-webkit-transition:3s linear;
   -moz-transition:3s linear;
     -o-transition:3s linear;
        transition:3s linear;
}

#ExampleB div.easein{
/*transition*/
-webkit-transition:3s ease-in;
   -moz-transition:3s ease-in;
     -o-transition:3s ease-in;
        transition:3s ease-in;
}

#ExampleB div.easeout{
/*transition*/
-webkit-transition:3s ease-out;
   -moz-transition:3s ease-out;
     -o-transition:3s ease-out;
        transition:3s ease-out;
}

#ExampleB div.easeinout{
/*transition*/
-webkit-transition:3s ease-in-out;
   -moz-transition:3s ease-in-out;
     -o-transition:3s ease-in-out;
        transition:3s ease-in-out;
}

Тот же самый момент с префиксами мы можем наблюдать и в этом примере.

Пример Г: Переход на поле ввода :focus

На примере, расположенном ниже при переходе на поле ввода, элемент будет расширяться, изменять цвет и приобретать внутреннюю тень. Смотрим.


Код примера.

css
input#exampletransitiond{
width:200px;
padding:10px;
border:1px solid rgba(0,0,0,0.5);
/*border-radius*/
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
/*transition*/
-webkit-transition:3s linear;
   -moz-transition:3s linear;
     -o-transition:3s linear;
        transition:3s linear;
}

input#exampletransitiond:focus{
width:300px;
background-color:#E7FBF8;
outline:none;
/*box-shadow*/
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.5);
   -moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.5);
        box-shadow:inset 0 0 5px rgba(0,0,0,0.5);
}

Пример Д: Полет фигуры

При наведении мыши на объект внизу, фигура начинает вращаеться на 360 градусов (с помощью CSS3 2D трансформации), перемещаясь слева направо, увеличиваясь в размерах (по ширине и высоте) и наследуя постепенно во времени тень (с помощью box-shadow).

:)

Код примера.

css
div.exampletransitione{
width:500px;
height:60px;
margin:20px 0;
}

div.exampletransitione div.transition{
width:20px;
height:20px;
background-color:#ED8029;
color:#fff;
padding:10px;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
margin-left:0;
/*transition*/
-webkit-transition:3s linear;
   -moz-transition:3s linear;
     -o-transition:3s linear;
        transition:3s linear;
}

div.exampletransitione:hover div.transition{
width:50px;
height:50px;
margin-left:400px;
/*transform*/
-webkit-transform:rotate(360deg);
   -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
     -o-transform:rotate(360deg);
        transform:rotate(360deg);
/*box-shadow*/
-webkit-box-shadow:-5px -5px 5px #888;
   -moz-box-shadow:-5px -5px 5px #888;
        box-shadow:-5px -5px 5px #888;
}

Пример Е: Несколько переходов

Следующий пример демонстрирует несколько переходов, которые задаются через запятую. При наведении курсора на пример, приведенном ниже, внутренний DIV будет сначала двигаться слева направо в течение 3 секунд. Затем второй переход изменяет цвет фона с красного на зеленый. Обратное действие происходит немного по другому, сначала объект перемещается в исходное положение и уже потом меняет свой цвет.

...

Код примера.

css
div.exampletransitionf{
width:500px;
height:60px;
margin:20px 0;
}

div.exampletransitionf div.transition{
width:50px;
height:50px;
background-color:red;
padding:10px;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
margin-left:0;
/*transition*/
-webkit-transition:margin-left 3s linear, background-color 2s ease 3s;
   -moz-transition:margin-left 3s linear, background-color 2s ease 3s;
     -o-transition:margin-left 3s linear, background-color 2s ease 3s;
        transition:margin-left 3s linear, background-color 2s ease 3s;
}

div.exampletransitionf:hover div.transition{
margin-left:400px;
background-color:green;
}

На этом урок закончен.

 

Источники: www.css3.info, www.xiper.net

Оставить комментарий

Комментарии: 6
  • #1

    Вячеслав (Четверг, 15 Август 2013 18:18)

    Здорово!

  • #2

    МИША (Вторник, 10 Сентябрь 2013 05:19)

    О ДА ВЫ КУДЕСНИК!!! Я К ВАМ К КАК, СПЕЦУ С "?" НА ЭТОМ САЙТЕ ОЧЕНЬ НУЖНО ЧТОБЫ ДАННЫЕ ВНОСИЛИ САМИ ПОЛЬЗАВАТЕЛИ! ЭТО ВОЗМОЖНО??? na_more01@mail.ru ВК http://vk.com/na_more01

  • #3

    Farengate Pulse (Среда, 11 Сентябрь 2013 17:06)

    НА ЭТОМ САЙТЕ ОЧЕНЬ НУЖНО ЧТОБЫ ДАННЫЕ ВНОСИЛИ САМИ ПОЛЬЗАВАТЕЛИ! ЭТО ВОЗМОЖНО???
    =========================================================================
    1. Вы даете всем свой пароль от админки.
    2. Ваши пользователи присылают материал Вам на почтовый адрес, а дальше Вы сами выкладываете ее на сайт.
    Смотрите, что больше подходит и выбирайте.

  • #4

    skayvin163 (Среда, 21 Май 2014 09:58)

    а куда нужно заключать в с style?

  • #5

    Farengate Pulse (Суббота, 24 Май 2014 18:00)

    в head прописываете <style>...</style> и между этими тегами вставляете код

  • #6

    Stanislav (Среда, 14 Октябрь 2015)

    Вопрос в том, когда я отвожу мышь, у меня свойство продолжительности не работает, как у Вас. Хотелось бы, чтобы элемент принимал свйо обратный вид тоже с задержкой.