Lecaw

Учимся создавать Web-сайты

Великолепный эффект на CSS3 Transition Delays

June 4, 2012
CSS
825hits

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

ДЕМО 1

ДЕМО 2

 

У переходов есть миллион различных применений, но есть одна функция, которую я почти никогда не затрагиваю: transition delays. Почему иногда необходимо задерживать переход? Оказывается, что некоторые эффекты, становятся намного более красивыми и внушительными, когда вы используете этот дополнительный параметр. Давайте создадим демонстрационные примеры, чтобы понять как это работает.

Что мы создаем

Вот несколько демонстрационных примеров в которых используется данная функция.

Синтаксис

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

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

transition-property: opacity;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 2s;

Хоть это - самый прямой способ объявить transition, это - действительно громоздкий способ. Когда мы объясняем все различные требуемые префиксы, этот блок кода становится огромным:

-webkit-transition-property: opacity;
   -moz-transition-property: opacity;
     -o-transition-property: opacity;
    -ms-transition-property: opacity;
transition-property: opacity;
 
-webkit-transition-duration: 1s;
   -moz-transition-duration: 1s;
     -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
transition-duration: 1s;
 
-webkit-transition-timing-function: ease;
   -moz-transition-timing-function: ease;
     -o-transition-timing-function: ease;
    -ms-transition-timing-function: ease;
transition-timing-function: ease;
 
-webkit-transition-delay: 2s;
   -moz-transition-delay: 2s;
     -o-transition-delay: 2s;
    -ms-transition-delay: 2s;
transition-delay: 2s;

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

-webkit-transition: opacity 1s ease 2s;
   -moz-transition: opacity 1s ease 2s;
     -o-transition: opacity 1s ease 2s;
    -ms-transition: opacity 1s ease 2s;
transition: opacity 1s ease 2s;

Краткий синтаксис

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

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

transition:opacity 1s ease;

Сила задержек

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

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

Последовательное сообщение

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

  • Стандартное сообщение: “Hover Here”
  • Переход в 1 секунду  “Hover Here”
  • Ожидание в 1 секунду, затем появится второе сообщение: “Greetings!”
  • Ожидание в 2 секунды, затем появится третье сообщение: “How are you?”
  • После всех этапов появляется стандартное сообщение

HTML

Чтобы реализовать этот демонстрационный пример, мы создадим div, который содержит три различных абзаца.

<div>
<p>Hover Here</p>
<p>Greetings!</p>
<p><small>How Are You?</small></p>
</div>

CSS

Чтобы запустить CSS, мы разработаем div и абзацы. Во-первых, нужно настроить относительное расположение и установить hidden overflow для div.

Убедитесь, что вы точно расположили текстовые элементы и переместили их и из границы div так, чтобы они были не видимы по умолчанию. Я также включал SASS 3D effect.

div {
  height: 300px;
  background: #f3f3f3;
  position: relative;
  overflow: hidden;
}
 
/*Paragraph*/
p {
  position: absolute;
  left: 10%;
  margin: 0;
  top: -200px;
  font: bold 70px/1 Helvetica, sans-serif;
  color: #6d879d;
 
  @include threedeetext(#6d879d);
 
}
 
small {
  font-size: 40px;
}

Теперь пора переместить наш первый абзац на место и создать наш первый переход. Чтобы сделать это, мы будем использовать nth-child селектор. Поместите его 50px сверху, добавьте два перехода, второй переход должен быть без задержки и создайте эффект hover, который масштабирует его при наведении.

/*Hover Here Text*/
p:nth-child(1){
  top: 50px;
  -webkit-transition: top 1s ease;
     -moz-transition: top 1s ease;
       -o-transition: top 1s ease;
      -ms-transition: top 1s ease;
          transition: top 1s ease;
}
 
div:hover p:nth-child(1) {
  top: -100px;
}

Чтобы завершить этот демонстрационный пример, мы должны создать событие наведения для второго и третьего абзаца. Просто удостоверьтесь, что у абзаца “Greetings” есть одна вторая задержки и у абзаца “How are you?”  есть двухсекундная задержка.

/*Greetings Hover*/
div:hover p:nth-child(2) {
  top: 50px;
  -webkit-transition: top 1s ease 1s;
     -moz-transition: top 1s ease 1s;
       -o-transition: top 1s ease 1s;
      -ms-transition: top 1s ease 1s;
          transition: top 1s ease 1s;
}
 
/*How Are You? Hover*/
div:hover p:nth-child(3) {
  top: 110px;
  -webkit-transition: top 1s ease 2s;
     -moz-transition: top 1s ease 2s;
       -o-transition: top 1s ease 2s;
      -ms-transition: top 1s ease 2s;
          transition: top 1s ease 2s;
}
 
/*Hover Out Transitions*/
p:nth-child(3), p:nth-child(2) {
  -webkit-transition: top 0.2s ease 0s;
     -moz-transition: top 0.2s ease 0s;
       -o-transition: top 0.2s ease 0s;
      -ms-transition: top 0.2s ease 0s;
          transition: top 0.2s ease 0s;
}

Демо

Вот и все! Теперь давайте проверим наше демо на Tinkerbin. При помощи этого сервиса вы будете видеть и вносить поправки в  свой код.

Одна буква за один раз

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

HTML

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

<div>
<p><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></p>
</div>

CSS

Наш первый блок CSS установит наш div, точно так же, как прошлый раз, и разберет буквы. Я использую шрифт от Google Web “Bree Serif”. Я также установил непрозрачность в 0, определил позицию и преобразовал текст в верхний регистр.

div {
  background: #eee;
  height: 200px;
  position: relative;
}
 
span {
  font: 400 100px/1 'Bree Serif', Helvetica, sans-serif;
  margin: 50px;
  opacity: 0;
  text-transform: uppercase;
  position: absolute;
}
 

Теперь мы должны применить различные переходы к каждой букве. Чтобы выполнить это, используйте элемент nth-child точно так же, как прошлый раз и добавьте его для промежутков. Заметьте, главная отличие - то, что задержка уменьшается каждый раз, запускается в 0.4s и уменьшает её путь к 0.

span:nth-child(5) {
  -webkit-transition: all 0.1s ease 0.4s;
     -moz-transition: all 0.1s ease 0.4s;
       -o-transition: all 0.1s ease 0.4s;
      -ms-transition: all 0.1s ease 0.4s;
          transition: all 0.1s ease 0.4s;
}
 
span:nth-child(4) {
  -webkit-transition: all 0.1s ease 0.3s;
     -moz-transition: all 0.1s ease 0.3s;
       -o-transition: all 0.1s ease 0.3s;
      -ms-transition: all 0.1s ease 0.3s;
          transition: all 0.1s ease 0.3s;
}
 
span:nth-child(3) {
  -webkit-transition: all 0.1s ease 0.2s;
     -moz-transition: all 0.1s ease 0.2s;
       -o-transition: all 0.1s ease 0.2s;
      -ms-transition: all 0.1s ease 0.2s;
          transition: all 0.1s ease 0.2s;
}
 
span:nth-child(2) {
  -webkit-transition: all 0.1s ease 0.1s;
     -moz-transition: all 0.1s ease 0.1s;
       -o-transition: all 0.1s ease 0.1s;
      -ms-transition: all 0.1s ease 0.1s;
          transition: all 0.1s ease 0.1s;
}
 
span:nth-child(1) {
  -webkit-transition: all 0.1s ease;
     -moz-transition: all 0.1s ease;
       -o-transition: all 0.1s ease;
      -ms-transition: all 0.1s ease;
          transition: all 0.1s ease;
}

Для завершения, мы должны сначала объявить то, что происходит, когда мы наводим над сообщением. Я установил промежутки, чтобы использовать непрозрачность 1, показал их слева и повернул на 360 градусов так, чтобы они вращались вместе.

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

div:hover span {
  opacity: 1;
  left: 50px;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
 
div:hover span:nth-child(2) {
  left: 120px;
}
 
div:hover span:nth-child(3) {
  left: 175px;
}
 
div:hover span:nth-child(4) {
  left: 230px;
}
 
div:hover span:nth-child(5) {
  left: 280px;
}

ДЕМО 1

Демо 2

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

Оставить комментарий