Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> 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
Опубликовал: Сергей Кашурин
Просмотров: 467
Правила перепечатки

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

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

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


5 прекраснейших дизайнерских решений для ваших форм входа
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.
23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.
прихватки с логотипом
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.
leatherproducts.ru перчатки для iphone купить, у нас
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.

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

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

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

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

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

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

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