Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> CSS

Transition переход CSS3, анимация без JavaScript


Использование CSS3 в критичных участках сайта сейчас невозможно, но на мелких участках почему бы и нет, это вполне реально, можно и нужно.


  Наряду с нововведениями в CSS3, появляется много новых функций которые могут помочь создать отличные эффекты, один из наиболее полезных переходов, мы рассмотрим в этой статье.

transition: property duration timing-function delay;

  Изменение свойств атрибутов и создание новых событий в CSS3, используется для оживления элементов на странице, при этом используется простая структура, что облегчает понимание кода, и не потребуется дополнительных библиотек и других JavaScript’ов (например jQuery).

  Свойства

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

transition-property: свойство

  Меняем размер

  После того как мы определились со свойством, самое время назначить начальное значение которое пользователь увидит загрузив нашу страничку, и конечное, после того как он совершит какое-то действие, например наведёт (:hover) на элемент курсором мышки.

#mainheader {
    transition-property:width;
    width:50px; 
}
#mainheader:hover {
    width:75px;
}

  Продолжительность перехода

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

transition-duration: duration;

  Соберём всё вместе:

#mainheader {
    transition-property:width;
    transition-duration:0.5s; 
    width:500px;
}
#mainheader:hover {
    width:750px;
}

  Это значит, что через пол секунды, наш #mainheader увеличится с 500 до 750px в длинну.

  Функция времени

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

transition-timing-function:

  Смысл её прост и красив, за время которое мы указали она показывает плавную анимацию принимая значение перехода, от простого до кривой Безье, то есть  это стиль перехода. Указывается либо в скобках (0,0,1,1) – обычный линейный переход (значение либо 0 либо 1), либо ключевыми словами: по умолчанию ease, ease-in, ease-out, ease-in-out и cubic-bezier.
  Добавление этого стиля в наш код сделает его таким:

#mainheader {
    transition-property:width;
    transition-timing-function:ease-in-out; 
    transition-duration:0.5s; 
    width:500px;
}
#mainheader:hover {
    width:750px;
}

  Задержка

  Указывает на временную задержку перед анимированным переходом (время до анимации).

transition-delay: time;

  Заключение

  В заключении хочется сказать, что в настоящее время для работы данного перехода в браузере, некоторые из них требуют специальные префиксы  (за исключением IE10, Opera и Firefox16+):

  •   -moz-transition:  для Firefox 15
  •   -webkit-transition: для Chrome и Safari

  (Имейте в виду, что IE9 и ниже, не поддерживает данный переход)

  Весь код:

#mainheader {
    -moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */
    -webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */
    transition: width ease-in-out 0.5s 0.1s;
    width:500px;
}
#mainheader:hover {
    width:750px;
}

  Не правда ли проще чем в jQuery?)

  Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 26.01.2013
Опубликовал: Сергей Кашурин
Просмотров: 466
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

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