Переходы и анимация

Эволюцией CSS3 стала возможность задавать поведение для переходов и анимации. Фронтенд-разработчики много лет просили реализовать эти взаимодействия внутри HTML и CSS, без использования JavaScript или Flash. Теперь их мечта сбылась.

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

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

Переходы

Как уже упоминалось, чтобы переход имел место, элемент должен получить изменение состояния и для каждого состояния должны быть определены разные стили. Самый простой способ задать стили для различных состояний — это воспользоваться псевдоклассами :hover, :focus, :active и :target.

Есть четыре свойства, связанных с переходами в целом, это transition-property, transition-duration, transition-timing-function и transition-delay. Не все они обязательны для создания перехода, наиболее популярны первые три.

В приведённом ниже примере блок изменит цвет фона в течение одной секунды в линейном виде.

.box {
  background: #2db34a;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
}

.box {
  background: #2db34a;
  -webkit-transition-property: background;
     -moz-transition-property: background;
       -o-transition-property: background;
          transition-property: background;
  -webkit-transition-duration: 1s;
     -moz-transition-duration: 1s;
       -o-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: linear;
     -moz-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
}

transition-property

Свойство transition-property определяет, какие именно свойства будут меняться в сочетании с другими свойствами перехода. По умолчанию, изменяться будут все свойства в различных состояниях. Тем не менее, только свойства заданные в значении transition-property будут затронуты в любых переходах.

В приведённом выше примере, свойство background определено в значении transition-property. Здесь background — единственное свойство, которое будет изменяться в течение 1 секунды в линейном виде. Любые другие свойства, включённые когда изменяется состояние элемента, но не добавленные в значение transition-property, не получат поведение перехода, как это установлено в свойствах transition-duration или transition-timing-function.

Если требуется добавить несколько свойств в переход, они могут быть разделены запятой внутри значения transition-property. Кроме того, может быть использовано ключевое слово all для перехода всех свойств элемента.

.box {
  background: #2db34a;
  border-radius: 6px
  transition-property: background, border-radius;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

Свойства в переходах

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

• background-color
• background-position
• border-color
• border-width
• border-spacing
• bottom
• clip
• color
• crop
• font-size
• font-weight
• height
• left
• letter-spacing
• line-height
• margin
• max-height
• max-width
• min-height
• min-width
• opacity
• outline-color
• outline-offset
• outline-width
• padding
• right
• text-indent
• text-shadow
• top
• vertical-align
• visibility
• width
• word-spacing
• z-index

transition-duration

Длительность перехода задаётся с помощью свойства transition-duration. В качестве значения этого свойства можно использовать основные значения времени, в том числе секунды (s) и миллисекунды (ms). Эти значения времени можно также задавать и дробными — .2s, например.

При переходе нескольких свойств можно задать несколько длительностей, по одному на каждое свойство. Как и в случае значения свойства transition-property, несколько длительностей могут быть объявлены с помощью значений, разделённых запятыми. Важен порядок этих значений при определении отдельных свойств и длительностей. К примеру, первое свойство, заданное в transition-property, будет совпадать с первым значением в свойстве transition-duration и так далее.

Если на несколько свойств в переходе приходится только одно значение длительности, то оно будет задавать длительность для всех свойств перехода.

.box {
  background: #2db34a;
  border-radius: 6px;
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

Функция перехода

Свойство transition-timing-function используется для задания скорости, с которой будет двигаться переход. Зная длительность из свойства transition-duration у перехода может быть несколько скоростей в пределах одной длительности. Некоторые наиболее популярные значения ключевых слов для свойства transition-timing-function включают linear, ease-in, ease-out и ease-in-out.

Значение linear определяет переход, движущийся в постоянной скоростью из одного состояния к другому. Значение ease-in определяет переход, который начинается медленно и ускоряется на протяжении перехода, в то время как значение ease-out определяет переход, который начинает быстро и замедляется в течение всего перехода. Значение ease-in-out определяет переход, который начинается медленно, ускоряется в середине, а затем снова замедляется перед окончанием.

За каждой функцией времени стоит кубическая кривая Безье, которую можно указать конкретно с помощью значения cubic-bezier(x1, y1, x2, y2). Дополнительные значения включают step-start, step-stop и значение steps(<число шагов>, <направление>).

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

.box {
  background: #2db34a;
  border-radius: 6px;
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear, ease-in;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

transition-delay

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

.box {
  background: #2db34a;
  border-radius: 6px
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear, ease-in;
  transition-delay: 0s, 1s;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

Сокращённое свойство transition

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

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

.box {
  background: #2db34a;
  border-radius: 6px;
  transition: background .2s linear, border-radius 1s ease-in 1s;
}
.box:hover {
  color: #ff7b29;
  border-radius: 50%;
}

<button>Потрясающая кнопка</button>

button {
  border: 0;
  background: #0087cc;
  border-radius: 4px;
  box-shadow: 0 5px 0 #006599;
  color: #fff;
  cursor: pointer;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 12px 20px;
  transition: all .1s linear;
}
button:active {
  box-shadow: 0 2px 0 #006599;
  transform: translateY(3px);
}

<div class="card-container">
  <div class="card">
  <div class="side">...</div>
  <div class="side back">...</div>
  </div>
</div>

.card-container {
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  transform: rotateY(180deg);
}

Анимация

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

Ключевые кадры анимации

Чтобы установить несколько точек, в которых элемент должен совершать переход, используется правило @keyframes. Это правило включает имя анимации, любое число контрольных точек, а также свойства, предназначенные для анимации.

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}

Анимация выше называется slide, состояния начинаются сразу же после открытия правила @keyframes. Разные контрольные точки ключевых кадров задаются помощью процентов, начиная с 0% и работая до 100%, с промежуточной точкой на 50%. При желании вместо 0% и 100% могут быть использованы ключевые слова from и to. Кроме 50% также могут быть указаны дополнительные контрольные точки. Свойства элементов для анимации перечислены внутри каждой контрольной точки, left и top в приведённом выше примере.

Важно отметить, как и с переходами, могут быть анимированы только отдельные свойства. Подумайте, как вы могли бы переместить элемент сверху вниз, например. Попытка анимировать от top: 0 до bottom: 0 не будет работать, потому что анимация может применять только переход в пределах одного свойства, а не от одного свойства к другому. В этом случае элемент необходимо анимировать от top: 0 до top: 100%.

animation-name

После того, как объявлены ключевые кадры для анимации, они должны быть назначены для элемента. Для этого используется свойство animation-name с именем анимации из правила @keyframes, как значение свойства. Декларация animation-name применяется к элементу, для которого должна быть задана анимация.

.stage:hover .ball {
  animation-name: slide;
}

Использования одного свойства animation-name при этом недостаточно. Кроме того, необходимо объявить свойство animation-duration и значение, чтобы браузер знал, как долго должна длиться анимация до завершения.

animation-duration, функция времени и animation-delay

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

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
}

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

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
}

Анимация ниже должна вызвать отскок ball один раз при перемещении вправо, но только при наведении курсора на stage.

HTML

<div class="stage">
  <figure class="ball"></figure>
</div>

CSS

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}
.stage {
  height: 150px;
  position: relative;
}
.ball {
  height: 50px;
  position: absolute;
  width: 50px;
}
.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
}

Настройка анимации

Анимация также предлагает возможность дальнейшей настройки поведения элемента, в том числе можно задать, сколько раз анимация выполняется, а также направление, в котором анимация завершится.

animation-iteration-count

По умолчанию, анимация запускает свой цикл один раз от начала до конца, а затем останавливается. Чтобы анимация повторялась много раз может быть использовано свойство animation-iteration-count. Значения для него включают целое число или ключевое слово infinite. С помощью целого числа анимация будет повторяться столько раз, сколько указано, в то время как ключевое слово infinite будет повторять анимацию бесконечно и никогда не остановится.

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
}

animation-direction

Кроме возможности установить, сколько раз анимация повторяется, вы можете также объявить направление, в котором анимация завершается, с помощью свойства animation-direction. Значения этого свойства включают в себя normal, reverse, alternate и alternate-reverse.

Значение normal воспроизводит анимацию, как и намеревалось, от начала до конца. Значение reverse воспроизводит анимацию точно наоборот, чем это определено в правиле @keyframes, таким образом, начиная со 100% и работая в обратном направлении до 0%.

Значение alternate воспроизведёт анимацию вперёд, а затем назад. В ключевых кадрах это включает выполнение вперёд от 0% до 100%, а затем в обратном направлении от 100% до 0%. Используя свойство animation-iteration-count можно ограничить количество раз, когда анимация работает вперёд и назад. Счёт начинается с 1, когда анимация проходит вперёд от 0% до 100%, а затем добавляется 1, когда анимация проходит в обратном порядке от 100% до 0%. Объединение в общей сложности двух итераций. Значение alternate также инвертирует любые функции времени при воспроизведении в обратном направлении. Если анимация использует значение ease-in идущее от 0% до 100%, то затем использует значение ease-out идущее от 100% до 0%.

И, наконец, значение alternate-reverse сочетает оба значения alternate и reverse, запуская анимацию назад, а затем вперёд. Значение alternate-reverse начинается со 100% и выполняется до 0%, а затем снова обратно до 100%.

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

animation-play-state

Свойство animation-play-state позволяет анимации воспроизводиться или остановиться на паузу, с помощью ключевых слов running и paused, соответственно. Когда анимация снимается с паузы, она возобновляет работу из текущего состояния, а не начинается снова с самого начала.

В приведённом ниже примере свойство animation-play-state устанавливается на паузу, когда stage активен при щелчке по нему. Обратите внимание на то, как анимация временно приостанавливается, пока вы не отпустите кнопку мыши.

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.stage:active .ball {
  animation-play-state: paused;
}

animation-fill-mode

Свойство animation-fill-mode определяет, как элемент должен быть стилизован — до, после или до и после запуска анимации. Свойство animation-fill-mode принимает четыре значения ключевых слов, включая none, forwards, backwards и both.

Значение none не будет применять любые стили к элементу до или после того, как анимация запущена.

Значение forwards сохранит стили, объявленные в последнем указанном ключевом кадре. На эти стили, однако, могут повлиять значения свойств animation-direction и animation-iteration-count, меняя, где анимация заканчивается.

Значение backwards будет применять стили первого заданного ключевого кадра, до того, как анимация будет работать. Включает применение этих стилей в течение всего времени, что может быть задано в animation-delay. Значение backwards также может зависеть от значения свойства animation-direction.

Наконец, значение both применит поведение сразу от обоих значений forwards и backwards.

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-fill-mode: forwards;
}
.stage:active .ball {
  animation-play-state: paused;
}

Сокращённое свойство animation

К счастью анимация, подобно переходам, может быть записана в сокращённом формате. Это получается с помощью одного свойства animation вместо нескольких объявлений. Порядок значений в свойстве animation должен быть следующий: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode и, наконец, animation-play-state.

.stage:hover .ball {
  animation: slide 2s ease-in-out .5s infinite alternate;
}
.stage:active .ball {
  animation-play-state: paused;
}

Ресурсы и ссылки

• Understanding CSS3 Transitions на A List Apart
• CSS Cubic-Bezier Builder на Rob LaPlaca
• The Guide To CSS Animation: Principles and Examples на Smashing Magazine
• Using CSS Animations на Mozilla Developer Network