У Лугавчика

С приходом поддержки в современных браузерах css 3-й версии, у веб мастеров появилось мощное средство реализации простейшей анимации на страницах.

К такой анимации можно отнести: Плавное изменение цвета, размера, положения и прозрачности элементов. И всё это возможно благодаря свойству transition.

Данное свойство приминаем 4 параметра, которые можно повторять для каждого вида изменяемых параметров. Так самое простое описание: transition: all 2s linear 1s; Которое означает что все параметры элемента которые надо будет изменить будем менять по линейной функции, на протяжении 1 секунды, но анимацию начнём только чере 1s.

Любой из 4-х параметров можно опустить, но если надо указать событие с задержкой, то тогда стоиит указывать transition: 0s 1s; или transition: 0s/1s; Где изменение произойдёт через 1 секунду.

Анимация будет происходить при любом изменении объекта вызывающего появление или исчезновение сss свойств. Это может быть как наведение мышки :hover, изменение классов, аттрибутов, или свойств самого элемента или его родителей.

Так к примеру код плавной анимации выпадающего меню на сайте:

 
li ul{ 
    transition:visibility 0s 1s,opacity 1s; 
    visibility:hidden; 
    opacity:0; 
} 
li:hover ul { 
        opacity:0.9; 
        visibility:visible; 
        transition-delay:.1s; 
}

Где указано, что наш под пункт ul является невидимым и при этом полностью прозрачным, но при этом при каком-либо изменении будет видимость меняться для видимости, через 1 секунду (но он всегда происходит скачко обрано, поэтому длительностью 0 секунд) и в течении 1 секунды для прозрачности, что позволит плавно появитсья пункту меню.

И выставенно событие при наведении мышки на пункт меняем прозрачность и видимость объекта, но при этом выставляем задержку для начала всех событий в 1 десятую секунды, в этом случае объект становится выдимым, после небольшой задержки становится видимым и при этом плавно проявляется. При уходе курсора мышки с объекта li у нас в течении 1 секунды убирается прозрачность до 0 и после этого объект становится не видимым.

Попробуем рассмотреть ту красоту, что можно сделать не прибегая к скриптам на сайте, только с помощью таблицы стилей. Она у нас применена на маленьких изображениях у записей:

 
.Entry .imgs img{ 
  background:#eee !important; 
  transition:background 1s 0s, box-shadow 2s 2s, opacity 2s 3s, border-radius 2s 4s; 
  border-radius:43px; 
  padding:5px; 
  opacity:0.8; 
} 
.Entry .imgs img:hover{ 
  background:#444 !important; 
  border-radius:5px; 
  opacity:1; 
  transition:all 0.5s 0s; 
  box-shadow:3px 3px 4px 2px rgba(150,120,120,0.5);} 
} 

В нашем примере имеем картинку 75 точек по каждой стороне и по 5 точек окантовка, в результате получаем 85 точке, что примерно 43 точки для радиуса. Благодаря применеию радиуса в 50% от размера объекта, мы получаем полностью скруглённый уровень до середины, что при наличии 4-х таких углов даёт нам не квадратное изображение, а круглое.

А теперь переходим к магии, если раньше при наведении курсора мышки на объект у нас всё резко менялось и также резко менялось обратно, то теперь мы просим применить новое оформление в течении половины секунды, а после того как мышка покинет элемент вступает в силу верхнее правило, которое:

• за 1 секунду, плавно вернёт фон.
• Через 2 секунды у объекта начнёт исчезать тень.
• через 3 секунды плавно объект немного приобритёт прозрачности.
• и через 4 секунды начинается закругление элемента, которое будет длиться 2 секунды.

На других сайтах реализовано выплывание элементов при подведении курсора к краю страницы или выползание пунктов меню при наведении мышки.

Также стоит обратить что браузер Google Chrome использующий движок WebKit, как и Safari, пока поддерживают данное свойство в эксперементальном режиме и надо указывать его с приставкой -webkit- то есть: -webkit-transition. Остальные браузеры поддерживают уже в нормальной нотации.

Более подробная информация будет рассмотрена позже, а пока пользуйтесь поиском или задавайте вопросы в комментариях.