СКАЧАТЬ ПРИМЕРЫ

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

У меня для вас хорошие новости: последние версии браузеров реализуют несколько классных функций, которые наконец-то поддерживаются везде, и вы можете начать использовать их прямо сейчас!

Небольшое предостережение: большинство этих функций не работают в старых версиях IE (9 и ниже). Если доля этих браузеров среди ваших посетителей большая, я боюсь, для реализации этих функций вам придётся использовать обходные варианты. Ну а для остальных, вот что могут нам предложить современные браузеры:

1. Анимация и переходы средствами CSS

Анимация средствами CSS наконец-то доступна во всех основных браузерах, даже в IE (начиная с 10 версии). Есть два способа создания анимации в CSS.

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

Второй способ определения анимации немного сложнее – он подразумевает описание особых моментов анимации с помощью правила @keyframe . Это позволит вам создать повторяющуюся анимацию, не зависящую от действий пользователя и не запускаемую при помощи Javascript.

HTML

CSS

Container{ width: 300px; height:300px; margin: 0 auto; position:relative; overflow:hidden; } .planet{ position:absolute; top:0; left:0; width:100%; height:100%; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center; } .rocket{ position:absolute; top:0; left:0; width:100%; height:100%; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center; /* Chrome всё ещё требует префикса -webkit- */ -webkit-animation:orbit 2s linear infinite; animation:orbit 2s linear infinite; transition:background-position 0.8s; } .container:hover .rocket{ background-position:80px center; } /* Определяем правила keyframes анимации */ @-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg);} to { -webkit-transform:rotate(360deg); } } @keyframes orbit { from { transform:rotate(0deg); /* Здесь включены свойства -webkit-transform, потому что Chrome может начать поддерживать keyframe без префикса в будущем, но нет уверенности, что он станет поддерживать безпрефиксные свойства transform */ -webkit-transform:rotate(0deg);} to { transform:rotate(360deg); -webkit-transform:rotate(360deg); } }

Вы ещё много чего можете узнать про анимацию средствами CSS. Я советую начать с этой статьи в Mozilla Developer Network (MDN) . Если вас интересует поддержка браузерами, смотрите эту таблицу совместимости .

2. Расчёт значений с помощью calc()

Другая прекрасная новая особенность CSS – функция calc() . Она позволяет вам производить простые арифметические расчёты в CSS. Вы можете использовать её где угодно, где требуется длина или размер. Что ещё лучше, вы можете свободно смешивать разные единицы, например, проценты и пиксели. Это делает устаревшими множество хаков разметки, которые вы, скорее всего, использовали в прошлом. Вам этого мало? Функция работает в IE9 и выше, без префиксов.

HTML

CSS

Container{ /* Расчёт ширины */ width: calc(100% - 40px); background-color:#CDEBC4; color:#6D8B64; text-align:center; padding:25px 0; margin: 0 auto; }

Узнайте подробности о функции calc() здесь или смотрите таблицу совместимости .

3. Улучшенные селекторы

В настоящее время, если вы присваиваете ID элементам только для того, чтобы применить к ним стили, вы, скорее всего, делаете неправильно. CSS 2.1 и CSS 3 представили несколько мощных селекторов, которые могут сделать вашу разметку чище, а ваши таблицы стилей круче.

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

HTML

Это простой параграф текста, к которому применено несколько классных стилей из CSS3...

/* Стили элементов (здесь ничего интересного) */ p{ font-size: 16px; width: 420px; margin: 20px auto 0; text-align:center; } .container{ width: 420px; margin:50px auto 0; overflow: hidden; padding:5px; } .elem{ width:30px; height:30px; margin:4px; background-color:#A0DFAC; float:left; } .elem span{ position:absolute; top:5px; left:5px; right:5px; bottom:5px; border:2px solid #fff; } /* Селекторы, выбирающие первую букву и первую строку: */ p::first-letter{ background-color: #666; color: #FFF; font-size: 24px; font-style:normal; display: inline-block; padding: 0 5px; border-radius: 3px; margin-right: 2px; font-family: serif; } p::first-line{ font-size: 18px; text-transform: smallcaps; font-style: italic; text-decoration: underline; } /* Делаем первый и последний элементы фиолетовыми */ .elem:first-child, .elem:last-child{ background-color:#948bd8; } /* Делаем каждый чётный элемент круглым */ .elem:nth-child(odd){ border-radius:50%; } /* Делаем шестой элемент красным */ .elem:nth-child(6){ background-color:#cb6364; } /* Применяем стили к элементам, содержащим элемент span */ .elem:not(:empty){ background-color:#444; position:relative; -webkit-transform:rotate(25deg); transform:rotate(25deg); } /* Выбираем элементы по атрибутам */ .elem{ background-color:#aaa; } .elem{ background-color:#d7cb89; } /* Значение атрибута должно начинаться с bar. Под это подходят оба элемента */ .elem{ width: 16px; height: 16px; margin: 11px; } /* Элемент, который следует за элементом с атрибутом data-foo="bar2" */ .elem + .elem{ background-color:#78ccd2; }

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

4. Генерация контента и счётчики

Генерация контента – мощный инструмент в руках разработчиков – стала доступной, благодаря псевдо-элементам ::before и::after . Эта функция позволяет вам использовать меньше кода HTML для достижения тех же результатов.

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

CSS3 также даёт псевдо-элементам доступ к счётчикам , которые могут увеличиваться с помощью правила CSS. Они также могут получить доступ к атрибутам родительских элементов, содержащих их. Смотрите код примера ниже.

HTML

CSS

Container{ /* Установка счётчика cnt на 0 */ counter-reset: cnt; position:relative; text-align:center; padding:20px 0; width:420px; height: 160px; margin: 0 auto; } /* Вы можете применить стили к псевдо-элементам и задать их контент так, как если бы они были реальными элементами на странице */ .container::before{ display: block; content:"Наведите мышь на эти элементы:"; font-size:18px; font-weight:bold; text-align:center; padding:15px; } .container span{ display:inline-block; padding:2px 6px; background-color:#78CCD2; color:#186C72; border-radius:4px; margin:3px; cursor:default; } /* Создание счётчика псевдо-элементов */ .container span::after{ /* Каждый раз, когда выполняется это правило, значение счётчика увеличивается на 1 */ counter-increment: cnt; /* Добавление значения счётчика как часть контента */ content:" #" counter(cnt); display:inline-block; padding:4px; } /* Псевдо-элементы могут даже получать доступ к атрибутам своих родительских элементов */ .container span::before{ position:absolute; bottom:0; left:0; width:100%; content:attr(data-title); color:#666; opacity:0; /* Анимация переходов */ -webkit-transition:opacity 0.4s; transition:opacity 0.4s; } .container span:hover::before{ opacity:1; }

Генерация контенте поддерживается везде, включая IE9 и выше.

5. Градиенты

Градиенты дают веб-дизайнерам возможность создавать гладкие переходы между цветами без использования изображений. Градиенты CSS также отлично выглядят на retina-дисплеях, потому что они генерируются на лету.

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

HTML

CSS

Container{ text-align:center; padding:20px 0; width:450px; margin: 0 auto; } .container div{ width:100px; height:100px; display:inline-block; margin:2px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD; border-radius:2px; color:#666; vertical-align: top; line-height: 230px; font-size: 12px; } #el1{ background:linear-gradient(to bottom, #8dd2d9 , #58c0c7); } #el2{ background:radial-gradient(#77d19e,#46c17b); } #el3{ background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px); } #el4{ background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px); }

Смотрите детальное описание здесь , а таблицу совместимости здесь .

6. Шрифты

Можете себе представить, что было время, когда мы были ограничены всего лишь горсткой «web-безопасных» шрифтов и ничем более? Сложно поверить, учитывая, что сегодня у нас есть сервисы, вроде Google Fonts или typekit , которые позволяют вам подключить прекрасные шрифты, просто включив таблицу стилей в код вашей страницы.

Существуют даже шрифты значков, такие как fontawesome , содержащие симпатичные векторные значки вместо букв и цифр. Это всё возможно благодаря правилу @font-face, которое позволяет вам определить имя, характеристики и файлы исходного кода шрифтов, к которым вы затем можете обратиться в ваших объявлениях font/font-family.

HTML

Вот мой красивый веб-шрифт!

CSS

h1{ /* Используем шрифт, подключённый в коде HTML: */ font-family: Satisfy, cursive; font-weight:normal; font-size:24px; padding-top: 60px; }

Используя небольшие доработки, можно заставить веб-шрифты работать даже в IE6. Два сервиса шрифтов, упомянутые выше, берут эту проблему на себя, так что вам не придётся ничего делать дополнительно.

7. Размер блоков

Самая большая головная боль начинающих в CSS – это блочная модель . У создателей стандартов наверняка были свои причины, но интуитивно не совсем понятно, почему на ширину и высоту элемента влияют заполнения и границы.

Эта небольшая (вредная) особенность ломает разметку и вносит хаос, но наконец-то есть способ восстановить здравый смысл, используя правило box-sizing . Вы можете установить значение в border-box, что заставит элементы вести себя точно так, как вы задумали. Смотрите сами:

HTML

CSS

Container{ text-align:center; } .container div{ /* Установка свойства box-sizing: */ box-sizing:border-box; /* Firefox всё ещё требует префикса -moz */ -moz-box-sizing:border-box; width:120px; height:120px; display:inline-block; vertical-align:top; } /* Благодаря box-sizing, мы можем установить любые заполнения и границы, какие захотим, а элементы сохранят одинаковый размер */ #el1{ color:#524480; background-color:#B2A4E0; } #el2{ padding:8px; border:10px solid #9ec551; background-color:#fff; } #el3{ padding:32px; background-color:#ccc; }

Узнайте больше о правиле box-sizing здесь , или смотрите таблицу совместимости .

8. Границы в виде изображений

Свойство border-image позволяет вам отображать нестандартные границы вокруг элементов. Границы содержатся в единственном изображении (спрайте), где каждый регион изображения соответствует определённой части границы. В следующем примере изображение используется в качестве границы.

HTML

Поприветствуйте красивую границу в виде изображений!

CSS

p{ text-align:center; padding:20px; width:340px; margin: 0 auto; /* Установка свойств границы и изображения для границы */ border:30px solid transparent; border-image:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 round; }

Для более подробной информации, посмотрите страницу на MDN и эту статью про трюки CSS. Границы в виде изображений поддерживаются во всех основных браузерах и IE11.

9. Правила Media query

Правила Media query абсолютно необходимы, если вы серьёзно занимаетесь веб-дизайном. Они были доступны уже некоторое время, и стоит упомянуть, что они изменили способ создания веб-сайтов.

Раньше вам приходилось создавать обычный веб-сайт, достаточно широкий, чтобы подойти под наименьшее разрешение монитора, используемое в то время; и отдельную мобильную версию.Сайты, которые мы создаём сейчас, отзывчивы: они адаптируются к типу устройства, ориентации экрана и разрешению.

Правила Media query удивительно просты в использовании – всё, что вам нужно, заключить стили CSS в блок с правилом @media . Каждый блок @media активируется, когда соблюдается одно или более условий. Как пример, попробуйте изменить размеры этой страницы . Также в примере ниже попробуйте убрать блок @media и проверить, что изменится.

HTML

CSS

/* Стили основного контента и бокового блока */ .container{ width:900px; margin: 0 auto; overflow:hidden; } .main-section{ background-color:#CDEBC4; color:#6D8B64; width:520px; float:left; height:500px; } .sidebar{ background-color:#ccc; width:350px; float:right; height:400px; } .container p{ padding-top:100px; text-align:center; } .note{ text-align:center; padding-top:60px; font-style:italic; } /* Это простое правило media query располагает колонки друг под другом на маленьких экранах */ @media (max-width:900px){ .container{ width:100%; } .main-section, .sidebar{ width:auto; margin-bottom:20px; float:none; } }

Правила media query могут содержать проверки разрешения и ориентации экрана устройств, глубину цвета, плотность пикселей и многое другое. Подробности вы найдёте в этой статье , а также смотрите таблицу совместимости .

10. Множественные фоновые изображения

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

Каждое изображение (или слой) по отдельности может быть сдвинуто или анимировано, как иллюстрирует пример ниже (наведите мышь на изображение). Все правила CSS, относящиеся к фону, теперь могут принимать разделённый запятыми список свойств, каждое для определённого фонового изображения:

HTML

CSS

Space{ /* Передаём разделённый запятыми список фоновых изображений: */ background:url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big.png") no-repeat center 70px, url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") no-repeat bottom center; width:200px; height:200px; margin: 0 auto; border-radius:3px; /* Анимируем расположение обоих фоновых изображений */ transition:background-position 1s; } .space:hover{ /* То же самое относится к таким свойствам, как background-position и repeat */ background-position:35% 20px, top right; }

Дополнительная информация по множественным фоновым изображениям находится здесь . Эта функция широко поддерживается браузерами – все новые версии её поддерживают (смотрите таблицу ).

11. Колонки CSS

Разметку по колонкам было заведомо сложно реализовать в CSS. Обычно для этого приходилось использовать JavaScript или серверную обработку, разделяющую контент на разные элементы.

Этот процесс безосновательно усложнён и забирает ценное время разработчика от вещей, которые реально важны. К счастью, сейчас существует способ обойти это, используя правило CSS columns :

HTML

CSS

Container{ width: 500px; margin: 0 auto; } /* Создать колонки теперь вот так просто: */ .container p{ -moz-columns:3; -webkit-columns:3; columns:3; }

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

12. 3D трансформация средствами CSS

Ничто так не радует глаз, как впечатляющая 3D демонстрация средствами CSS. И хотя применение подобной трансформации вне демонстрации или сайтов-портфолио очень спорно, 3D CSS предлагает мощную функциональность дизайнерам и разработчикам, которая поможет завоевать сердца пользователей, если она грамотно реализована.

Взгляните на код следующего примера:

HTML

CSS

Container{ /* Насколько выраженными должны быть 3D эффекты */ perspective: 800px; -webkit-perspective: 800px; background: radial-gradient(#e0e0e0, #aaa); width:480px; height:480px; margin:0 auto; border-radius:6px; position:relative; } .iphone-front, .iphone-back{ /* Включаем 3D трансформацию */ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; /* Мы используем два отдельных элемента div для передней и задней панелей телефона. Следующий код скрывает элемент div, когда тот переворачивается, чтобы отобразить обратную сторону: */ backface-visibility: hidden; -webkit-backface-visibility: hidden; width:200px; height:333px; position:absolute; top:50%; left:50%; margin:-166px 0 0 -100px; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/iphone.png) no-repeat left center; /* Анимация переходов */ transition:0.8s; } .iphone-back{ /* Задняя панель по умолчанию перевёрнута на 180 градусов */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); background-position:right center; } .container:hover .iphone-front{ /* Когда мышь находится над контейнером, переворачиваем переднюю панель и прячем её, ... */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); } .container:hover .iphone-back{ /* ... в то же время, делая видимой заднюю панель */ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); }

Этот код сделан на основе нашей формы входа в стиле Apple . Если вы хотите узнать о 3D трансформациях в CSS подробнее, посмотрите эту детальную инструкцию . Если вам не нужна поддержка старых версий IE, остальные браузеры поддерживают её достаточно широко.

Другие методы, достойные упоминания

Существуют и другие запоминающиеся функции, о которых стоило бы упомянуть. Если вы так ещё не сделали, можете прекратить использовать префиксы для свойств border-radius и box-shadow . Также вы теперь можете использовать data-uri как фоновые изображения во всех браузерах. Opacity также поддерживается везде, также как и очень полезное свойство background-size .

Придётся ещё немного подождать поддержки flexbox , @supports , фильтров, и CSS масок, но я думаю, это ожидание окупится!

Перевод статьи «12 Awesome CSS3 Features That You Can Finally Start Using » был подготовлен дружной командой проекта .

Хорошо Плохо

franzose 25 апреля 2014 в 07:04

CSS 3 Timing Functions и с чем их едят

• Разработка веб-сайтов ,
• CSS ,
• HTML

• Перевод

Хей народ, пристегните ремни и держитесь покрепче, ибо наступил действительно волнительный момент: вам предстоит разобраться в тонкостях чрезвычайно интересных временны х функций CSS!

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

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

О временной функции в CSS

Данное свойство - одно из самых неочевидных в CSS анимации, в то время как большинство свойств из этой категории вполне самопонятны. Тем не менее, суть его в контроле и изменении скорости анимации: оно определяет точки ускорения и замедления за указанный период времени.

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

Заметка: свойства timing-function не существует. Называя это свойство, на самом деле я имею в виду transition-timing-function и animation-timing-function .

Прежде чем пойти дальше, давайте познакомимся с синтаксисом и посмотрим, как он вписывается в весь процесс определения CSS анимации. Простоты ради, давайте используем CSS переход и пропишем все transition-свойства по отдельности:

Div { transition-property: background; transition-duration: 1s; transition-delay: .5s; transition-timing-function: linear; } /* This could, of course, be shortened to: */ div { transition: background 1s .5s linear; }
Сокращенная запись перехода не имеет строгого порядка значений, но требует, чтобы значение transition-delay находилось после значения transition-duration (не обязательно непосредственно после). Кроме того, значение transition-duration является единственным необходимым для определения функции. А поскольку значения по умолчанию у остальных параметров вполне приемлемы, для определения перехода вам редко понадобится нечто большее, чем:

Div { transition: 1s; } /* То же, что: */ div { transition: all 1s 0s ease; }

Но это же скучно. Несмотря на то, что значений по умолчанию вполне достаточно для какого-нибудь обычного hover"а, когда вы работаете над чем-то более существенным, временные функции оказываются серьезным инструментом для тонкой настройки ваших анимаций!

Теперь, когда вы знаете, что делают временные функции, пришла пора узнать, как они это делают.

Заглянем под капот

Многие из вас наверняка не заостряли свое внимание на допустимых значениях свойства timing-function . Так вот, их пять: ease (по умолчанию), ease-in , ease-out , ease-in-out и linear . При этом данные значения - всего лишь короткая запись определения кривой Безье.

Э-э, что?!

Вы можете быть незнакомы с данным термином, однако я держу пари, что в действительности вам доводилось видеть кривую Безье. Черт побери, если вы использовали какой-либо графический пакет, то наверняка даже сами создавали её! Именно так, ибо когда вы используете инструмент Pen или Path для создания гладкой кривой, то, что у вас получается, - и есть кривая Безье! В нашем случае она - «волшебство» временной функции, описывающее тип ускорения на графике.

Данная кривая Безье соответствует значению ease (изображение принадлежит Smashing Magazine)

Если ваша реакция на впервые увиденную кривую Безье была подобна моей, у вас наверняка возник вопрос: как вообще такая кривая может быть построена по четырем точкам на графике?! Вряд ли смогу я вам объяснить это на словах, однако у меня есть фантастическая гифка, которая поможет мне в этом:

Рисование кривой Безье (изображение взято из Википедии)

Поскольку данная кривая строится по четырем точкам, мы называем ее кубической (cubic) кривой Безье, в отличие от квадратичной кривой (quadratic, по трем точкам) и кривой четвертого порядка (quartic, по пяти точкам).

Функция cubic-bezier()

А вот сейчас вам станет еще интереснее, ибо я скажу, что вы можете задавать кубическую кривую с помощью функции cubic-bezier() , используя её вместо ключевых значений свойства timing-function . Полагаю, вам необходимо некоторое время, дабы сдержать волнение.

С помощью функции cubic-bezier() вы можете манипулировать кривой так, как вам заблагорассудится, задавая при этом абсолютно любые параметры ускорения вашей анимации! Так что давайте посмотрим, как эта функция работает и каким образом она позволяет создавать собственные кривые Безье.

Во-первых, мы уже знаем, что кубическая кривая строится по четырем точкам: 0, 1, 2, 3. Во-вторых, важно помнить, что первая и последняя точки (0 и 3) уже определены на графике, где точка 0 всегда имеет значение 0;0 (снизу слева), а точка 3 - 1;1 (сверху справа).

Данное условие оставляет нам всего две точки, которые необходимо разместить на графике, и сделать это можно с помощью функции cubic-bezier() ! Она принимает четыре аргумента: первые два - координаты x, y первой точки; вторые два - координаты x, y второй точки.

Transition-timing-function: cubic-bezier(x1, y1, x2, y2);
Чтобы вы освоили синтаксис и то, как эта функция создает кривую, а также её физическое влияние на анимацию, я покажу вам пять ключевых значений свойства timing-function , их эквивалент для cubic-beizer() и результирующий эффект анимации.

EASE-IN-OUT

Давайте начнем с данного ключевого значения, поскольку и логику построения кривой, и переложение её на анимацию сейчас, вероятно, проще всего понять.

/* Эквивалент ключевому значению ease-in-out */ transition-timing-function: cubic-bezier(.42, 0, .58, 1);

Совершенно симметричная кривая Безье, что означает, что ускорение и замедление анимации будет производиться с одинаковой скоростью (изображение принадлежит Smashing Magazine)

Точка 1 расположена на 0,42 по оси x и на 0 по оси y, в то время как точка 2 - на 0,58 и 1 соответственно. Результат - совершенно симметричная кривая Безье: ускорение и замедление анимации будет происходить с одинаковой скоростью. Отсюда и название ключевого слова.

Посмотрите на демонстрацию и вы увидите физический эффект значения ease-in-out , сравните его с другими значениями.

Исходная анимация на Codepen

EASE

Данное ключевое значение является значением по умолчанию свойства timing-function . На самом деле, оно очень похоже на предыдущее, хотя ускорение анимации происходит быстрее, а замедление - более постепенно.

/* Эквивалент ключевому значению ease */ transition-timing-function: cubic-bezier(.25, .1, .25, 1);

Кривая ease имеет крутое начало и много более плавное продолжение (изображение принадлежит Smashing Magazine)

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

EASE-IN И EASE-OUT

Как не сложно догадаться, данные ключевые значения имеют противоположный смысл. ease-in плавно ускоряет анимацию развивая максимальную скорость к её завершению, в то время как ease-out плавно снижает изначально максимальную скорость перед завершением анимации. Следуя логике, ключевое значение ease-in-out , которое мы рассмотрели ранее, - отличная комбинация этих двух кривых Безье.

/* Эквивалент ease-in */ transition-timing-function: cubic-bezier(.42, 0, 1, 1); /* Эквивалент ease-out */ transition-timing-function: cubic-bezier(0, 0, .58, 1);


Кривые Безье: ease-in слева, ease-out справа (изображение пренадлежит Smashing Magazine)

LINEAR

Последнее ключевое значение, которое вообще-то к кривым не относится. Исходя из названия, значение linear свойства timing-function устанавливает одинаковую скорость в течение всей анимации, что означает, что вместо кривой Безье мы получим прямую линию. То есть в данном случае не имеется какой-либо модели ускорения для изображения на графике.

/* Эквивалент linear */ transition-timing-function: cubic-bezier(0, 0, 1, 1);

Значение linear подразумевает одинаковую скорость на протяжении всей анимации (изображение принадлежит Smashing Magazine)

Если вы вновь посмотрите демо в начале, то наверняка заметите, что несмотря на одинаковую общую продолжительность, некоторые из анимаций кажутся медленнее остальных. Почему же так происходит? Ну, например, у ease-in-out начало и завершение анимации проходит с оттяжкой. Поэтому, чтобы уложиться в заданную продолжительность, в основной части скорость анимации существенно выше. В виду такого поведения мы воспринимаем её и короче, и быстрее, тогда как, например, линейная анимация кажется нам длинной и растянутой.

Возможно, к этому моменту у вас уже возникло ощущение, что данная статья слишком уж медленно подходит к своей истинной сути, так что давайте прямо сейчас перейдем к рассмотрению функции cubic-bezier() и созданию собственных временных функций с её помощью.

Создание собственных моделей ускорения с помощью функции cubic-bezier()

Теперь, когда мы узнали ключевые значения свойства timing-function и соответствующие им кривые Безье, а также понаблюдали их воздействие на анимацию, давайте научимся создавать собственные модели ускорения с помощью манипуляций кривой.

К настоящему моменту предполагается, что вы уже умеете располагать точки 1 и 2 на графике с помощью функции cubic-bezier() , а также ясно представлять, каким образом это влияет на анимацию. Хотя, если вы делаете это «в слепую», не удивительно, что данное занятие может очень быстро надоесть.

К счастью, существуют на Земле такие люди, как Лиа Веру (Lea Verou), которые, вероятно, не успокоятся пока кодинг на CSS не станет еще легче! Ли разработала приложение «Кубический Безье» для создания собственных кривых Безье и сравнения их со стандартными. Так что вместо того, чтобы гонять туда-сюда циферки в cubic-bezier() , зайдите на Cubic Bézier , поиграйтесь с кривой да посмотрите на результат. Это куда круче!

Скришнот страницы сайта Cubic Bézier (изображение принадлежит Smashing Magazine)

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

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

Исходная анимация на Codepen

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

/* Значения cubic-bezier() для первого примера из демо */ transition-timing-function: cubic-bezier(.1, .9, .9, .1);

Пример нестандартной кривой Безье (изображение принадлежит Smashing Magazine)

Основное отличие данной временной функции от значений по умолчанию состоит в резком отклонении кривой от шкалы «прогрессии» (по оси y). Это обуславливает быстрый старт и завершение анимации, но затяжную паузу в середине (в том месте, где кривая выравнивается). Данная модель резко контрастирует с той, к которой мы привыкли с обычными временными функциями, которые используют противоположный подход, замедляя анимацию в начале и конце, а не по середине.

А теперь проявим изобретательность

Да-да: кривые Безье становятся еще более захватывающими! И кто бы мог подумать? Тем временем, границы воображения расширяются с открытием того, что лишь шкала времени (по оси x) ограничена на графике промежутком от нуля до единицы, в то время как шкала прогрессии (по оси y) может выходить за его рамки как снизу, так и сверху.

Шкала прогрессии - это именно то, о чем вы подумали: нижний конец (0) являет собой начало анимации, а верхний (1) - завершение. Как правило, кубическая кривая Безье всегда следует снизу вверх по данной шкале с разной интенсивностью, пока не достигнет конечной точки анимации. Тем не менее, возможность располагать точки 1 и 2 вне промежутка 0-1 позволяет кривой выходить за его пределы, что вызывает движение в обратном направлении! Как обычно, лучший способ понять это - посмотреть:

Кривая безье со значениями за пределами 0-1 (изображение принадлежит Smashing Magazine)

Точка 2 расположена за пределами обычного промежутка 0-1 на -0,5 , что в свою очередь тянет кривую вниз. Посмотрите следующее демо и вы увидите эффект «подпрыгивания» в середине анимации.

Исходная анимация на Codepen

И наоборот, вы могли бы разместить это «движение назад» в начале анимации, а также заставить кривую немного «выбежать» за предполагаемую конечную точку. Представьте, будто вы делаете пару шагов назад для разбега; затем, в конце, вы проноситесь мимо финиша, в результате чего вам приходится немного вернуться, чтобы узнать время, которое показал хронометр. Посмотрите пример, чтобы действительно понять, о чем идет речь. Кроме того, изучите кривую Безье, которая создает такой эффект.

Исходная анимация на Codepen

Кривая Безье со значениями за пределами 0-1 (изображение принадлежит Smashing Magazine)

Теперь у вас должно быть вполне ясное представление о том, как значения cubic-bezier() за пределами 0-1 могут физически повлиять на поведение анимации. Мы, конечно, можем глазеть на перемещающиеся кубики целый день, но давайте таки закончим данный раздел примером, который ясно покажет изобретательский подход в использовании временной функции.

Исходная анимация на Codepen

Всё верно: мы анимируем воздушный шарик! Чего?.. То ли это, что вам всегда хотелось делать с помощью CSS?

Суть анимации в «надувании» шарика по клику таким образом, что он взлетит к «потолку» и слегка отскочет от него, как по-настоящему. Значение cubic-bezier() за границей 0-1 и есть тот инструмент, который позволит нам создать этот эффект «отскока», повторяя реалистичное поведение. В представленном фрагменте кода показаны координаты, выставленные в функции cubic-bezier() , а далее показана полученная кривая.

/* The cubic-bezier() values for the bouncing balloon */ transition-timing-function: cubic-bezier(.65, 1.95, .03, .32);

Кривая Безье, эмулирующая «отскакивающий» шарик (изображение принадлежит Smashing Magazine)

Данный пример отлично показывает, как кривая трансформируется в итоговую анимацию, поскольку кривая отражает её практически идеально. Сначала кривая проходит от начала шкалы прогрессии по прямой, заставляя шарик двигаться от её начала до конца с одинаковой скоростью. Затем, подобно замедлению шарика, кривая резко изгибается в обратном направлении, прежде чем начать постепенно возвращаться к вершине. На самом деле всё очень просто!

Так что как только вы освоите кривую и искусство манипулирования ею, будете умницей!

Временные функции и покадровая анимация CSS

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

То есть, если у вас имеется четыре кадра, которые перемещают квадрат от одного угла к другому внутри контейнера, и вы применяете временную функцию с «отскоком» (такую же, как мы использовали для шарика), каждое из четырех движений будет подвержено этому «отскоку», нежели вся анимация. Давайте посмотрим это поведение в действии и в коде.

Исходная анимация на Codepen (гифка получилась кривоватой)

@keyframes square { 25% { top:200px; left:0; } 50% { top:200px; left:400px; } 75% { top:0; left:400px; } } div { animation: square 8s infinite cubic-bezier(.65, 1.95, .03, .32); top: 0; left: 0; /* Other styles */ }
Обратите внимание на то, что когда кадр 100% не определен, элемент просто возвращается к своему начальному состоянию. В данном случае это то, что нам нужно, поэтому определять этот кадр мы не будем. Из примера вполне ясно видно работу временной функции на всех четырех кадрах по тому, как квадрат на каждом из них отскакивает от стенок рамки.

Если для какого-либо конкретного кадра вам необходимо определить собственную временную функцию, то определите её прямо в коде этого кадра, как показано в следующем примере:

@keyframes square { 50% { top: 200px; left: 400px; animation-timing-function: ease-in-out; } }

Временная функция steps()

Вы думали, что на этом наши приключения окончены? Как бы не так! Я ведь уже говорил вам, что CSS не ограничивается встроенными временными функциями!

В данном разделе мы изучим концепцию «пошаговых» функций и заменим кривые прямыми линиями с помощью временной функции steps .

Данная функция весьма полезна, несмотря на свою специфичность. Она позволяет разбить анимацию на отрезки, что будет отличать её от обычного анимированного движения. Например, если нам надо переместить квадрат на 400 пикселей вправо за 4 шага в течение 4 секунд, то вместо плавного движения он будет «прыгать» на 100 пикселей каждую секунду. А теперь давайте взглянем на код данного примера. Он, должно быть, просто дуновение свежести после погружения в тонкости функции cubic-bezier() !

Исходная анимация на Codepen

Div { transition: 4s steps(4); } div:target { left: 400px; }
Как видите, все дело в определении количества отрезков анимации. Но имейте в виду, что оно не может быть отрицательным или десятичным числом. Есть и второй, не обязательный, аргумент, возможные значения которого - start и end (последнее является значением по умолчанию).

Transition-timing-function: steps(4, start); transition-timing-function: steps(4, end);
Значение start запускает анимацию в начале каждого шага, а end - в конце. Применительно к «движущемуся квадрату», данная картинка поможет лучше объяснить разницу между двумя этими значениями.

Различие значений start и end функции steps() (изображение принадлежит Smashing Magazine)

Как видите, со значением start анимация начинается немедленно, а при end - с задержкой в одну (в данном случае) секунду.

Ну, и ради пущей всеобъемлющности материала, отметим, что у функции step() есть два предопределенных аргумента: step-start и step-end , эквивалентные записи steps(1, start) и steps(1, end) соответственно.

Изобретательный подход к «пошаговым» функциям

Наверняка из повседневных задач вам вряд ли так уж часто будет выпадать анимация движущегося квадрата, тем не менее с помощью функции steps() можно сделать уйму других крутых штук. Допустим, если в вашем распоряжении имеется несколько мультяшных спрайтов, то вы можете использовать уже изученную технику для создания анимации, используя всего пару CSS свойств! Давайте посмотрим на демо и код.

Исходная анимация на Codepen

Div { width: 125px; height: 150px; background: url(images/sprite.jpg) left; transition: 2s steps(16); /* The number of steps = the number of frames in the cartoon */ } div:target { background-position: -2000px 0; }
Итак, у нас есть прямоугольник 125 пикселей в ширину с фоновым изображением на 2 000 пикселей, содержащим 16 кадров. Изначально это изображение расположено по левому краю прямоугольника, и всё, что нам предстоит сделать, - сдвигать его влево так, чтобы все 16 кадров прошли через маленькое «окошко» нашего прямоугольника. При «обычной» анимации кадры просто пролетели бы мимо, однако с функцией steps() фоновое изображение сдвигается влево ровно за 16 шагов, в достаточной мере показывая каждый кадр изображения. Вот так мы сделали мини-мультик всего лишь с помощью CSS анимаций!

Демонстрация способа смещения фонового изображения так, что каждый кадр пройдет через небольшое «окошко» (изображение принадлежит Smashing Magazine)

Еще одно забавное использование функции steps() я нашел благодаря Лиа Веру (кому же еще?), которая придумала весьма интересную анимацию компьютерного набора. О ней я вам сейчас и расскажу.

Исходная анимация на Codepen

Для начала, вам нужен какой-то текст. А также, к сожалению, вам необходимо знать, сколько символов он содержит, ибо вам придется использовать это количество в CSS. Еще одно условие: шрифт должен быть моноширинным для того, чтобы все символы имели одинаковую ширину.

smashingmag

.text { width: 6.6em; width: 11ch; /* Number of characters */ border-right: .1em solid; font: 5em monospace; }
Наш текст состоит из 11 символов. Длину строки мы укажем с помощью единицы измерения ch , а для браузеров, не имеющих её поддержки, мы напишем другое значение. Далее по правой стороне строки мы поставим черную рамку, которая станет курсором. И теперь, когда всё на месте, нам нужно лишь анимировать текст, а это чрезвычайно просто.

Нам понадобятся две отдельные анимации: одна для курсора, другая для печати. Чтобы сделать курсор, необходимо всего лишь заставить мерцать черную рамку.

@keyframes cursor { 50% { border-color: transparent; } } .text { /* existing styles */ animation: cursor 1s step-end infinite; }
Как и предполагалось, рамка просто меняет свой цвет с черного на прозрачный и обратно. В данном случае функция steps() имеет определенный смысл: уберите её, и курсор, вместо того, чтобы «моргать», будет плавно появляться и исчезать.

Наконец, анимация печатания столь же проста. Всё, что нам нужно сделать, - уменьшить длину строки до нуля, а затем постепенно наращивать её за 11 шагов (по количеству символов).

@keyframes typing { from { width: 0; } } .text { /* existing styles */ animation: typing 8s steps(11), cursor 1s step-end infinite; }
Текст будет «раскрываться» по одной букве за шаг в течении восьми секунд, в то время как «курсор» (border-right) будет мигать постоянно. Техника проста настолько же, насколько и эффективна.

Теперь мы можем дополнить этот замечательный пример, попробовав обратный эффект - удаление текста. Для этого нужно изменить ключевое слово кадра с from на to и затем добавить параметр animation-fill-mode со значением forwards , чтобы удостовериться, что когда текст «удалится» (т. е. когда анимация завершится), он останется «удаленным». Посмотрите на демо.

Исходная анимация на Codepen

@-webkit-keyframes typing { to { width: 0; } } @keyframes typing { to { width: 0; } } @-webkit-keyframes cursor { 50% { border-color: transparent; } } @keyframes cursor { 50% { border-color: transparent; } } .text { width: 6.6em; width: 11ch; /* Number of characters */ border-right: .1em solid; overflow: hidden; font: 5em monospace; margin-top: 50px; -webkit-animation: cursor 1s step-end infinite; animation: cursor 1s step-end infinite; } #go:target .text { -webkit-animation: typing 4s steps(11) forwards, cursor 1s step-end infinite; animation: typing 4s steps(11) forwards, cursor 1s step-end infinite; }

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

Поддержка браузерами

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

ПОДДЕРЖКА CSS TRANSITIONS

Браузер	С префиксом	Без префикса
Internet Explorer	Нет	10+
Firefox	4+ (-moz-)	16+
Chrome	4+ (-webkit-)	26+
Safari	3.1+ (-webkit-)	6.1+
Opera	10.5+ (-o- prefix)	12.1+

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

ПОДДЕРЖКА ВРЕМЕННЫХ ФУНКЦИЙ CSS

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

Итог

Так что же мы узнали о временных функциях CSS? Давайте подытожим.

1. Они определяют, когда анимация ускоряется и замедляется
2. Они гораздо круче, нежели набор предопределенных значений
3. Вы можете создавать эффект «отскока» с помощью значений cubic-bezier(), выходящих за пределы промежутка 0-1
4. Вы можете разбить анимацию на несколько шагов/отрезков
5. Поддержка браузерами великолепна и только улучшается

И, несмотря на кросс-платформенность описанных технологий, это не было бы статьей о техниках CSS 3, если бы я не упомянул о прогрессивном улучшении. Всегда идите от простого к сложному: убедитесь, что ваша работа доступна на устройствах и в браузерах, которые не поддерживают данный функционал, перед тем, как создавать эффекты для браузеров, которые смогут их обработать.

А теперь вперед! Счастливых шажков и искривлений!

Теги:

• css 3
• css animations
• css transitions
• css keyframes
• bezier
• кривые безье

Добавить метки

CSS может гораздо больше, чем вы от него ожидаете. С каждым годом этот язык становится всё мощнее, получая функционал, который раньше был только у JavaScript. В этой статье мы рассмотрим 8 хитрых трюков с CSS-функциями, для которых не нужен JS.

1. Подсказки (tooltips)

Многие сайты до сих пор используют JavaScript для создания подсказок, но самом деле на CSS их сделать гораздо проще. Самым лёгким решением будет прописать текст подсказки в data-атрибуте HTML-кода, например, data-tooltip="…" . Теперь можно использовать CSS для отображения текста подсказки в функции attr() :

Tooltip::after { content: attr(data-tooltip); }

Всё предельно просто. Конечно, для стилизации нужно больше кода, но, к счастью, для этого есть прекрасная библиотека Hint.css .

2. Использование data-атрибутов и функции attr()

Мы уже использовали attr() для подсказок, но это не единственный способ её применения. В сочетании с data-атрибутами вы можете создать изображение-ярлык с заголовком и описанием, используя лишь одну строку HTML-кода:

Теперь вы можете использовать функцию attr() для отображения заголовка и описания:

Caption::after { content: attr(data-title); ... }

Вот рабочий пример с анимацией, срабатывающей при наведении:

3. CSS-счётчики

То, что можно делать с CSS-счётчиками, похоже на магию. Это не самая известная функция языка, и многие считают, что она почти не поддерживается, но это не так:

CSS-счётчики также прекрасно подходят для отображения динамически изменяющихся чисел в списках, которые можно пересортировать перетаскиванием:

4. Эффект «замерзшего стекла» при помощи CSS-фильтров

Ещё в iOS 7 Apple добавила эффект «замерзшего стекла» - полупрозрачные, размытые элементы. Этот эффект становится весьма популярным. Реализовать его раньше было не так уж и просто - до того, как появились CSS-фильтры, изображения приходилось искажать . Теперь же всё стало намного легче .

6. Улучшенная сетка при помощи calc()

Гибкие сетки - это очень полезная штука, но при работе с ними возникают различные проблемы, связанные в основном с разметкой и размерами блоков. Даже flexbox не справится с этой задачей в одиночку. Но функция calc() , которую можно использовать в качестве значения, может принести много пользы. В этом руководстве приведены примеры использования этой функции. Используя препроцессор наподобие Sass и функцию calc() , создать удобную сетку будет совсем несложно . Кроме того, эта функция поддерживается почти всеми браузерами.

See Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.

7. Выравнивание фиксированных элементов

Функцию calc() также можно использовать для выравнивания элементов с фиксированным положением. Например, если у вас есть обёртка с полями переменного размера слева и справа и вам нужно точно выровнять элемент внутри обёртки, то вам придётся поломать голову, выбирая правильный размер отступа. С calc() вы можете сочетать абсолютные и относительные величины для идеального выравнивания:

Wrapper { max-width: 1060px; margin: 0 auto; } .floating-bubble { position: fixed; right: calc(50% - 530px); /* 50% - half your wrapper width */ }

Доброе время суток. Я хочу рассказать вам о тенденции появления функций в css 3 и о том, как это можно и даже порой нужно использовать в проектах.

Чтобы не тратить ваше время я распишу свойства, о которых я хотел бы вам рассказать:

• функция counter
• функция calc
• функция attr
• функция toggle
• единица измерения - rem
• единица измерения - vw
• единица измерения - vh

Функции в css 3

Великое ликование пронеслось по легиону разработчиков, когда мы получили одну из первых функций - media queries , которая позволяла нам принимать те или иные стили в зависимости от всевозможных внешних факторов. По факту это было просто большое дополнение к стандартизированному еще в версии css 2.1 функционалу.

Благодаря появлению таких возможностей мир стал ярче, сайты стали гораздло удобней при просмотре со всемвозможных гаджетов и зародились такие понятия как Responsive Web Design и Adaptive Web Design (по сути второе есть подмножество первого).

На этом w3c не остановилось, и совсем недавно мы услышали о такой функции, как supports или CSS Feature Queries , которая поддерживается только в firefox начиная с 21 версии, chrome начиная с 28 версии и в последней (12.1) opera.

Это наши звезды, они в центре внимания и все их любят. С ними всё вполне понятно и очевидно. А теперь взглянем на менее значимые функции.

Counter

Это функция инкремента в css, которая кстати существует еще с версии 2.1. Что же она делает, спросите вы?! А делает она следующее:
Фунция counter позволяем вам начинать счетчик с именем, инкрементировать его и обнулять. Контент счетчика можно выводить через псевдоэлементы after и before . В общем имитировать свои списки, правда для себя я никакой пользы в этой функции не нашел.

Calc

Что касается поддержки:

• Internet explorer 9+
• Mozilla Firefox 19+
• Google Chrome 24+
• Safari 6+
• Opera не поддерживает

Лично мне данная функци очень нравится, так как она позволит немного сократить код когда мне например нужно отцентровать элемент: