Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Переходы

.

Переходы

Как ни забавно выглядят преобразования в IE9, пора вновь на время забыть об этом браузере. В то время как и Opera, и Firefox, и WebKit поддерживают переходы CSS, IE, в котором эта функция не реализована, снова остается в гордом одиночестве.

Переходы (transitions) позволяют изменять значение свойств CSS во времени, создавая простые эффекты анимации. К примеру, если ссылка изменяет цвет при наведении мыши, вы можете сделать это изменение не мгновенным, а постепенным.

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

Конечно, уже довольно давно можно создавать анимацию средствами JavaScript, но использование встроенных средств CSS меньше загружает процессор на стороне клиента, поэтому изменения происходят плавнее. Это особенно важно (можно сказать, жизненно важно) для мобильных устройств, вычислительная мощность которых ограничена.

Переходы CSS объявляются вместе с обычными стилями. Когда бы ни произошло изменение стиля, браузер активирует переход. Наиболее часто такие переходы применяются к изменениям стилей по наведению мыши. Но так же точно переходы будут работать и при изменении стилей посредством JavaScript. Это важно: вместо того чтобы программировать анимацию в JavaScript, теперь можно просто изменить значение свойства элемента и наслаждаться полученным эффектом.

Для создания простого перехода в CSS необходимо:

1. Указать исходное состояние элемента в качестве состояния по умолчанию.

2. Указать конечное состояние элемента, например при наведении указателя мыши.

3. Включить функцию перехода в декларацию состояния по умолчанию, используя несколько различных свойств: transition-property, transition-duration, transition-timing-function и transition-delay. Ниже мы подробно разберем их все.

Самой главное, на что нужно обратить внимание, — это то, что переходы объявляются при описании состояния по умолчанию. В настоящее время фунции переходов необходимо включать с префиксами поставщиков -webkit-, -о- и -moz- для WebKit, Opera и Firefox соответственно. Нам предстоит освоить большой материал, поэтому давайте начнем с различных функций переходов. По мере изучения, мы будем добавлять их к трансформации, созданной в предыдущем разделе, чтобы слово «dukes» плавно перемещалось в новое положение при наведении указателя мыши.


.

Читайте так же:
Not found