Веб-дизайн / 7.5

“

В этом уроке мы рассмотрим переходы между состояниями элементов и CSS анимацию. Начнем!

Глоссарий

Для успешного освоения материала рекомендуем вам изучить следующие понятия:

Видеолекция

Конспект

Что такое состояния

В прошлом уроке мы уже использовали одно из состояний элемента — это был focus.

Мы записали его через двоеточие в селекторе — это называется псевдокласс. Псевдокласс focus применяется к элементу при получении им фокуса. Например для текстового поля формы, как в нашем случае.

Состояние hover

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

1. Давайте добавим эффект наведения на наши кнопки. Для этого укажем селектор кнопки и псевдокласс hover.

.btn:hover {
background: #e63a23;
}

2. Это правило будет применено, когда курсор будет наведен на кнопку, и в этот момент мы будем менять фон.

Теперь при наведении фон меняется, хотя тут больше подходит слово — заменяется, потому что это происходит мгновенно.

Переход между состояниями

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

1. transition-property — свойство, к которому будет применяться переход. Это может быть all — т.е. все свойства или какое-то конкретное свойство — например, background.

2. transition-duration — определяет продолжительность выполнения анимации.

3. transition-timing-function — необязательное свойство; определяет, насколько быстро должно изменяться указанное значение.

4. transition-delay — тоже необязательное свойство; задает задержку, через которую анимация должна начать выполнение.

Укажем transition для кнопки.

.btn {
…
transition: all 0.3s ease-in-out;
}

Теперь посмотрим как это будет выглядеть в браузере

Отлично, фон действительно меняется, и мы это видим.

Важно

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

Работа с transition в инспекторе

Посмотрим на кнопку в инспекторе. Свойство transition является краткой записью, поэтому тут есть стрелочка, нажав на которую можно раскрыть все свойства, относящиеся к transition. Им можно задавать значения отдельно, если краткая запись вас не устраивает. Возле timing-function есть иконка, отображающая график этой функции. Если на нее нажать, мы увидим наглядно эту функцию и сможем ее менять.

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

Например, можно получить вот такой результат

Установка transition на стрелку

С кнопкой мы разобрались, переходим к стрелке.

1. Указываем для нее hover эффект и она будет сдвигаться вниз на 25 px.

.chevron:hover {
transform: translate (-50%, 25px);
}

Свойство transform позволяет трансформировать элементы разными способами. Значение translate сдвигает по 2 координатам.

2. Не забываем указать transition на основной класс стрелки.

.chevron {
…
transition: all 0.3s ease-in-out;
}

Теперь при наведении стрелка будет плавно сдвигаться вниз.

Установка transition на изображение

На нашей странице осталось установить transition только картинкам в галерее.

1. Для этого для img-wrapper указываем hover с трансформацией.

.img-wrapper:hover {
transform: scale(1.05);
}

Трансформироваться картинка будет с помощью эффекта scale — он масштабирует элемент. Единица — это стопроцентный масштаб, а 1,05 — увеличение на 5%.

2. И не забываем указать transition для элемента.

.img-wrapper {
...
transition: all 0.3s ease-in-out;
}

Вот так это выглядит

Keyframes

С помощью transition можно сделать переход между состояниями, но не анимацию. Чтобы сделать полноценную анимацию, существуют keyframes. Давайте сделаем нашу стрелку постоянно анимированной.

1. Создаем правило keyframes и придумываем для него имя.

@keyframes chevron-animation {
   ...
}

Внутри этого правила мы должны указать ключевые кадры с помощью имен или процентов.

@keyframes chevron-animation {
  from {
     ...
  }
  to {
     ...
  }
}

Например, мы можем написать from и to — это два имени, которые можно использовать. То, что написано в кадре from будет применено на момент начала анимации, а то, что указано в to, будет применено к концу анимации. Если вам недостаточно начальной и конечной точек, вместо имен можно использовать проценты, например 0 и 100.

@keyframes chevron-animation {
  0% {
     ...
  }
  100% {
     ...
  }
}

Между ними могут быть и другие кадры, например 50.

@keyframes chevron-animation {
  0% {
     ...
  }
  50% {
     ...
  }
  100% {
     ...
  }
}

Тогда у нас будет 2 перехода, от начала к середине и от середины к концу анимации.

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

@keyframes chevron-animation {
  0%, 100% {
     ...
  }
  50% {
     ...
  }
}

Нам как раз нужен такой вариант для стрелки. В начале и конце мы укажем смещение по вертикали 0, а в середине анимации — 10 px.

@keyframes chevron-animation {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 10px);
  }
}

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

2. Применяем созданное правило анимации.

Анимация задается с помощью свойства animation. Как и translate это лишь краткая запись.

.chevron {
  ...
  animation: chevron-animation infinite 2s ease-in-out;
}

Вначале указываем имя анимации, потом количество повторений, по умолчанию повторение будет 1 раз, но нам нужно бесконечно, поэтому указываем infinite. Затем идет длительность анимации, и в конце мы также указываем функцию.

Посмотрим на результат

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

3. Отключаем анимацию при наведении.

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

.chevron:hover {
  animation: none;
}

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

Поэтому мы сделаем следующее. В hover будем останавливать анимацию с помощью свойства animation-play-state.

.chevron:hover {
  animation-play-state: paused;
}

Теперь при наведении на стрелку анимация будет приостановлена и рывка не будет.

4. Смещение стрелки при наведении

Для создания отклика при наведении на стрелку будем менять сам img, трансформируя его как и раньше.

.chevron img {
  transition: all 0.5s ease-in-out;
}
.chevron:hover img {
  transform: translateY(25px);
}

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

Анимация svg фона

Анимировать можно почти все элементы и даже наш svg-фон, который находится в отдельном файле.

1. Давайте откроем его.

<svg xmlns="http://www.w3.org/2000/svg" width="56" height="100">
    <rect width="56" height="100" fill="#403F4C"></rect>
    <path d="M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100" fill="none" stroke="#706f7d" stroke-width="2"></path>
    <path d="M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34" fill="none" stroke="#595867" stroke-width="2"></path>
</svg>

В нашем svg есть 3 элемента — один rect и два path. С помощью path можно создавать сложные фигуры из отрезков, кривых и т.п.

2. Зададим второму path класс animation.

<svg xmlns="http://www.w3.org/2000/svg" width="56" height="100">
    <rect width="56" height="100" fill="#403F4C"></rect>
    <path d="M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100" fill="none" stroke="#706f7d" stroke-width="2"></path>
    <path class=”animation” d="M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34" fill="none" stroke="#595867" stroke-width="2"></path>
</svg>

Внутри svg тоже можно задавать стили.

3. Создадим анимацию мерцания и назначим ее на класс animation.

<svg xmlns="http://www.w3.org/2000/svg" width="56" height="100">
    <style>
        .animation {
            animation: blinking 2s infinite;
        }
        @keyframes blinking {
            0%, 100% {
                stroke: #706f7d;
            }
            50% {
                stroke: #82828c;
            }
        }
    </style>
    ...
</svg>

Давайте посмотрим

Теперь фон немного мигает, но не напрягает нас.

“

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

Статьи
CSS-анимации

Примеры
Примеры анимации и не только

Интерактивное задание

Тест