[html]<style>.transition {padding: 10px;margin: 10px 10px 10px 0;border-radius: 5px;}.notransition {background-color: #ffba00;  width: 200px;padding: 10px;border-radius: 5px;}.notransition:hover {background-color: #ff7200;} .transition1 { background-color: #ffba00;width: 200px;-webkit-transition: background-color 3s;-moz-transition: background-color 3s; -o-transition: background-color 3s; -ms-transition: background-color 3s; transition: background-color 3s;} .transition1:hover { background-color: #ff7200;} .transitiondemo5, .transitiondemo6, .transitiondemo7 {width: 500px;} .transition2 { background-color: #ffba00;width: 200px;-webkit-transition: width 3s;-moz-transition: width 3s;-o-transition: width 3s; -ms-transition: width 3s; transition: width 3s;} .transition2:hover {width: 500px;} .transition4 {background-color: #ffba00;width: 200px; color: #fff;-webkit-transition: color 5s;-moz-transition: color 5s;-o-transition: color 5s;-ms-transition: color 5s;transition: color 5s;}.transition4:hover { color: #000;}.transitiondemo5 .transition {background-color: #ffba00;width: 100px; margin-left: 0; color: #fff;-webkit-transition: color 3s, margin-left 2s, background-color 3s;-moz-transition: color 3s, margin-left 2s, background-color 3s;-o-transition: color 3s, margin-left 2s, background-color 3s; -ms-transition: color 3s, margin-left 2s, background-color 3s; transition: color 3s, margin-left 2s, background-color 3s;}.transitiondemo5:hover .transition {color: #000;background-color: #ff7200;margin-left: 400px;}.transitiondemo6 .transition61 {background-color: #ffba00;width: 100px;  -webkit-transition: width 0;-moz-transition: width 0s;-o-transition: width 0;-ms-transition: width 0; transition: width 0;}.transitiondemo6 .transition62 {background-color: #ffba00; width: 100px;-webkit-transition: width 2s;-moz-transition: width 2s; -o-transition: width 2s;-ms-transition: width 2s;transition: width 2s;}.transitiondemo6 .transition63 { background-color: #ffba00;width: 100px;-webkit-transition: width 4s;-moz-transition: width 4s;-o-transition: width 4s;-ms-transition: width 4s;transition: width 4s;}.transitiondemo6 .transition64 {background-color: #ffba00;width: 100px; -webkit-transition: width 6s;-moz-transition: width 6s; -o-transition: width 6s; -ms-transition: width 6s;transition: width 4s;}.transitiondemo6:hover .transition {width: 500px;}.transitiondemo7 .transition71 { background-color: #ffba00; width: 100px;-webkit-transition: width ease 4s;-moz-transition: width ease 4s;-o-transition: width ease 4s;-ms-transition: width ease 4s; transition: width ease 4s;}.transitiondemo7 .transition72 {background-color: #ffba00;width: 100px;-webkit-transition: width linear 4s; -moz-transition: width linear 4s;o-transition: width linear 4s;-ms-transition: width linear 4s;transition: width linear 4s; }.transitiondemo7 .transition73 {background-color: #ffba00; width: 100px;-webkit-transition: width ease-in 4s;-moz-transition: width ease-in 4s;-o-transition: width ease-in 4s;-ms-transition: width ease-in 4s;transition: width ease-in 4s; }.transitiondemo7 .transition74 {background-color: #ffba00;width: 100px;-webkit-transition: width ease-out 4s; -moz-transition: width ease-out 4s; -o-transition: width ease-out 4s; -ms-transition: width ease-out 4s;transition: width ease-out 4s;}.transitiondemo7 .transition75 {background-color: #ffba00;width: 100px; -webkit-transition: width ease-in-out 4s;-moz-transition: width ease-in-out 4s;-o-transition: width ease-in-out 4s;-ms-transition: width ease-in-out 4s; transition: width ease-in-out 4s;}.transitiondemo7:hover .transition { width: 500px;}.transitiondemo8 .transition81 { background-color: #ffba00; width: 100px;-webkit-transition: width ease 4s;-moz-transition: width ease 4s;-o-transition: width ease 4s;-ms-transition: width ease 4s; transition: width ease 4s;}.transitiondemo8 .transition82 {background-color: #ffba00;width: 100px;-webkit-transition: width 4s ease 2s; -moz-transition: width 4s ease 2s;o-transition: width 4s ease 2s;-ms-transition: width 4s ease 2s;transition: width 4s ease 2s; }.transitiondemo8 .transition83 {background-color: #ffba00; width: 100px;-webkit-transition: width 4s ease -2s;-moz-transition: width 4s ease -2s;-o-transition: width 4s ease -2s;-ms-transition: width 4s ease -2s;transition: width 4s ease -2s; }.transitiondemo8:hover .transition {width: 500px;}</style>[/html]

Изучая CSS. Демонстрация CSS3. Что и как?

Свойства CSS3 уже прочно вошли в жизнь верстальщиков, web-разработчиков и других людей, тесно связанных с web. Вошли задолго до того, как будут официально рекомендованы в качестве стандарта. Думаю, многие сталкивались и использовали в своих проектах border-radius, box-shadow, border-image и другие свойства, которые на данный момент лучше поддерживаются браузерами и проще в использовании.
В этой статье, я хочу продемонстрировать другие свойства из CSS3 и показать как ими пользоваться, а также некоторые хитрости, на которые способны CSS благодаря новым свойствам 
Начнем... нет, не с самого легкого, а с самого интересного, на мой взгляд. Это возможности CSS3 для создания эффекта анимации.

CSS3 Transitions

Свойство transition (переход), пожалуй, одно из самых интересных в новом стандарте, позволяющих сделать множество интересных анимированных эффектов. Рассмотрим для начала вот такой пример.
Допустим, мы хотим изменить цвет фона элемента по наведению курсора (псевдокласс :hover). Что мы можем сделать с помощью CSS 2.1? Что-то в этом духе:
[html]<div class="notransition">Пример 1</div>[/html]
Неплохо и своего мы добились, но что можно сделать с помощью CSS3? Посмотрим...
[html]<div class="transition transition1">Пример 2</div>[/html]
Интереснее, правда? Посмотрим, как это работает.

Transition имеет 4 отдельных свойства:
transition-property
transition-duration
transition-timing-function
transition-delay

transition-property (свойство) указывает на то css-свойство, которое будет изменяться путем перехода.

Синтаксис:

transition-property: none | all | [ < IDENT > ] [, < IDENT > ]*

none - ни одно свойство не будет использовать переход;
all - все свойства будут использователь переход;
< IDENT > - (идентификатор) ключевое слово конкретного свойства (background-color, color, margin  и т.п.). Может быть больше одного.

В примере выше мы экспериментировали со свойством background-color. Посмотрим как будут работать другие свойства.
[html]<div class="transition transition2">Width from 200px to 500px</div><div class="transition transition4">Color from #fff to #000</div><div class="transitiondemo3"><style>.transitiondemo3 {width: 500px;}.transitiondemo3 .transition { background-color: #ffba00;width: 100px; margin-left: 0;-webkit-transition: margin-left 2s; -moz-transition: margin-left 2s;-o-transition: margin-left 2s; -ms-transition: margin-left 2s;transition: margin-left 2s;}.transitiondemo3:hover .transition {margin-left: 400px;}</style><div class="transition transition3">Margin-left from 0 to 400px</div></div>[/html]
Неплохо правда? Есть где развернуться фантазии Все свойства, которые поддерживают переходы описаны в спецификации.
Но это еще не все, подвергнуть анимации можно сразу несколько свойств, для этого досточно написать свойства через запятую. Давайте объединим описанные выше color, background-color и margin-left:

transition-property: backround-color, color, margin-left

[html]<div class="transitiondemo5"><div class="transition">Пример 3</div></div>[/html]

transition-duration (длительность) указывает с какой скоростью будет происходить переход.

Синтаксис:

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

time - (время) время в секундах (s) или миллисекундах (ms). Может буть указано несколько раз (для каждого из свойств, указанных в transition-property).
Если это свойство не задано, то будет использоваться значение по умолчанию - 0, т.е. переход будет осуществлять мгновенно.

Поэкспериментируем:
[html] <div class="transitiondemo6"> <div class="transition transition61">0s</div><div class="transition transition62">2s</div><div class="transition transition63">4s</div><div class="transition transition64">6s</div></div>[/html]

transition-timing-function (временная/скоростная функция) указывает как будет происходить переход.

Синтаксис:

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

где

< timing-function > = ease | linear | ease-in | ease-out | ease-in-out

or

< timing-function > = cubic-bezier(< number >, < number >, < number >, < number >)

< timing-function > - функция, которая определяет каким образом будет осуществляться переход (представляет собой кубическую кривую Безье). Возможно задать несколько значений через запятую (для каждого из свойств, указанных в transition-property. Может задаваться ключевыми словами (первый случай) и напрямую (второй случай).
    Не вдаваясь в подробности, что такое кривая Безье и зачем она нужна, рассмотрим ключевые слова:
ease -  переход начинается медленно, затем ускоряется, затем снова замедляется (используется по умолчанию, т.е. если Вы эту функцию не зададите).
linear - переход с одинаковой скоростью от начала и до конца.
ease-in - переход с замедленным началом.
ease-out - переход с замедленным концом.
ease-in-out - переход с замедленным началом и концом.
   
Проведем эксперимент =)
[html]<div class="transitiondemo7"><div class="transition transition71">ease</div><div class="transition transition72">linear</div><div class="transition transition73">ease-in</div><div class="transition transition74">ease-out</div><div class="transition transition75">ease-in-out</div></div>[/html]

transition-delay (задержка) - указывает с какой задержкой будет происходить переход (можно задать задержку анимации или сделать несколько эффектов последовательными).

Синтаксис:

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

time - (время) время в секундах (s) или миллисекундах (ms). Может буть указано несколько раз (для каждого из свойств, указанных в transition-property).
Если указать отрицательное значение, то анимация начнется не сначала (см. пример).
[html]<div class="transitiondemo8"> <div class="transition transition81">delay 0s</div><div class="transition transition82">delay 2s</div><div class="transition transition83">delay -2s</div></div>[/html]

Сокращенная запись свойства Transition.
Кроме того, свойство transition можно записывать сокращенно, объединяя все 4 отдельных свойства: transition-property, transition-duration, transition-timing-function, transition-delay (как background объединяет в себе background-color, background-image и т.п.)

Синтаксис:

transition: <transition> [, <transition>]*

Если Вы хотите задать несколько групп свойств одновременно, то они задаются через запятую (группа 1, группа2, группа3)
В свою очередь свойства в группе задаются в следующем порядке:

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

Отредактировано Герда (18.07.20 12:53)