Переключение состояний с помощью CSS keyframes

Переключение состояний с помощью CSS keyframes

От автора: скажем, вы хотите, чтобы какой-то элемент находился в одном состоянии 9 секунд и в другом состоянии 1 секунду в цикле. Не нужно никаких плавных переходов, просто четкое переключение состояний.

На днях мне стало интересно, как это реализовать, и Сара Драснер показала мне, как можно переключаться между очень короткими состояниями. Например, 59,999% и 60%. Длительность анимации занимает 10 секунд, и мы не можем вставить промежуточные кадры.

Немного поясню: если вы используете шаги, то вы не сможете использовать что-то типа .999:

div {
  ...
  animation: color 10s steps(10) infinite both;
}

Один keyframe / одно изменение

Это натолкнуло меня на еще одну странность в CSS. Если вы использовали steps(1), то не будет никаких изменений, так ведь? Потому что задействован всего один шаг. Это не так. Когда вы используете steps(1), создается два шага по непонятной причине. Это можно использовать.

Вернемся к первому примеру из статьи: одно состояние длится 9 секунд, второе – 1 секунду. Вот так: 1-1-1-1-1-1-1-1-1-2

Тогда можно написать:

div {
  ...
  background: orangered;
  animation: color 10s steps(1) infinite both;
}

@keyframes color {
  90% {
    background: teal;
  }
}

Блок div будет иметь цвет teal всего одну секунду! После чего цвет будет возвращаться на orangered. Изменим keyframe на 70% и получим: 1-1-1-1-1-1-1-2-2-2

Изменим на 10%: 1-2-2-2-2-2-2-2-2-2

Изменяем состояние и сохраняем его

Мы только что заполучили крутой трюк для смены состояний в цикле. Если вам не нужен цикл, анимацию можно запускать один раз и оставаться в конечном состоянии:

div {
  ...
  background: orangered;
  animation: color 10s steps(1) forwards;
}

@keyframes color {
  90% {
    background: teal;
  }
}

Мы всего-то удалили ключевое слово infinite, которое зацикливало анимацию, и использовали слово forwards, которое сохраняет стили последнего состояния. (Ключевое слово both делает то же самое)

Но как можно переключаться между состояниями при помощи взаимодействия с пользователем? И это тоже возможно! Представьте очень долгую анимацию (которая длится много-много дней). К такой анимации можно привязать пользовательский интерфейс для перепрыгивания между состояниями. Ниже я привел простое демо, где по клику на ссылку срабатывает состояние :target, которое заставляет анимацию перепрыгнуть на keyframe со стилями состояния:

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree