Каждый разработчик скопировал блок @keyframes из ответа Stack Overflow, вставил его, освежил, и нашел элемент сидит совершенно неподвижно Девять раз из десяти причина скучна: название анимации в @keyframes правило не соответствовало имени в animation стенография, или продолжительность оставлена на нуле, или класс никогда не приземлялся на элемент Другая причина заключается в том, что анимация ключевых кадров является одним из тех углов CSS, где вы не можете судить результат, читая код. последовательность процентов и преобразований ничего не говорит вам о том, кажется ли движение плавным, резким или морским, пока вы не посмотрите, как оно выполняется.
CSS-анимация - это браузер и механизм #39;s для перемещения элемента через именованную последовательность стилей с течением времени. В отличие от перехода, который анимирует одно изменение и ожидает триггера, анимация следует за a @keyframes скрипт с таким количеством шагов, как вам нравится, может зацикливаться навсегда, и начинает самостоятельно в момент его применения. Это то, что заставляет загружать спиннеры, импульсы внимания, эффекты входа и каждый бит окружающего движения, что заставляет интерфейс чувствовать себя живым. Но две половины, ключевые кадры и стенография, должны точно согласовываться, и стенография упаковывает семь или восемь значений в одну строку в порядке, который большинство людей никогда не запоминают.
выше Генератор анимации CSS удаляет догадку Вы выбираете движение из библиотеки предустановок, регулируете продолжительность, смягчение, задержку, счетчик и направление итераций и смотрите, как оно воспроизводится на элементе предварительного просмотра в реальном времени. инструмент записывает оба @keyframes правило и сопоставление animation сократите в поле готовности к копированию, с уже синхронизированными именами, чтобы вставленный вами блок работал с первого раза.
TL;DR: CSS-анимация перемещает элемент через a
@keyframesпоследовательность во времени, и в отличие от перехода, он не нуждается в триггере и может зацикливаться. The@keyframesимя иanimation-nameдолжно точно совпадать, что является единственной наиболее распространенной причиной, по которой анимация ничего не делает. Сокращение содержит имя, продолжительность, функцию синхронизации, задержку, счет итерации, направление и режим заполнения. Предпочитаю анимациюtransformаopacityдля плавного, скомпонованного движения. этот генератор дает вам четырнадцать предустановок, полный контроль воспроизведения и живой предварительный просмотр, и излучает как ключевые кадры, так и стенографию вместе. он полностью работает в вашем браузере без регистрации.
Какую проблему решает генератор CSS-анимации?
Неловкая вещь в анимации ключевых кадров - это поездка туда и обратно. Чтобы настроить отскок вручную, вы пишете @keyframes правило, пишите animation строка, сохранить файл, переключиться на браузер, дождаться перезагрузки, и смотреть. если отскок слишком агрессивный вы меняете один translateY цените и делайте весь цикл снова. потому что этот цикл медленный, большинство людей принимают первую версию, которая не выглядит сломанной, а не версию, которая кажется правильной, и разница между этими двумя является именно той полировкой, которая отделяет рассматриваемый интерфейс от шаблона.
Генератор сворачивает этот цикл в один клик Вы выбираете предустановку, перетаскиваете ползунок длительности, и элемент предварительного просмотра воспроизводит движение перед вами немедленно. переключите функцию синхронизации с ease к кривой безье и изменение ощущения мгновенно.Установите счет итерации на бесконечный и анимационные петли, чтобы вы могли изучить его. через несколько минут этого вы строите интуицию для того, как шестьсот миллисекунд выглядит против двенадцатисот, что является чувством, что вам нужно принимать правильные решения движения везде.
Есть аргумент правильности тоже Вы не можете произвести искаженный animation значение путем выбора из меню и перетаскивания ползунков, и вы не можете неправильно ввести имя ключевого кадра, потому что инструмент привязывает сокращение к сгенерированным им ключевым кадрам. Выход всегда безопасен для вставки. эта надежность - та же самая причина, по которой я держу визуальные CSS строители близко для других свойств, тот же инстинкт, что и для достижения генератор градиента вместо того, чтобы считать цвет, я останавливаюсь в голове или генератор коробчатых теней вместо того, чтобы гадать по радиусам размытия.
Чем CSS-анимация отличается от CSS-перехода?
Это постоянно подталкивает людей, поэтому стоит быть точным Переход оживляет одно свойство между двумя состояниями и требует чего-то изменить, зависание, фокус, переключаемый класс, прежде чем он запустится. Он имеет начальное значение и конечное значение и ничего между ними. Анимация, напротив, следует за a @keyframes правило, которое может определить любое количество промежуточных шагов, поэтому элемент может перемещаться по целой хореографии, а не по прямой линии от А до Б. Он также ничего не ждет: применяет и играет.
Практическое следствие заключается в том, что вы тянетесь к переходу, когда вы хотите сгладить изменение состояния, и к анимации, когда вы хотите движение, которое является присущим элементу. кнопка, которая затемняется при наведении - это переход. спиннер, который вращается вечно, значок, который импульсирует, чтобы нарисовать глаз, или карта, которая скользит вверх, когда загружается страница, все анимации, потому что движение происходит само по себе и часто повторяется. если вы все еще решаете, какой из них нужен данному эффекту, эмпирическое правило простое: если действие пользователя запускает его и оно идет в одну сторону, используйте переход; если оно играет само по себе, циклически или имеет более двух шагов, используйте анимацию.The Генератор переходов CSS является сопутствующим инструментом для первого случая, и эти два варианта охватывают большую часть движения, которое вы когда-либо напишете.
| Аспект | Переход | Анимация |
|---|---|---|
| Триггер | Требуется изменение состояния (наведение, фокус, класс) | Начинается самостоятельно при применении |
| Шаги | Во-вторых, начало и конец | Любой номер, через @keyframes |
| Зацикливание | Нет, запускается один раз за смену | Да, с iteration-count |
| Типичное использование | Эффекты наведения и фокусировки | Спиннеры, пульс, входы |
Каков правильный порядок анимационного сокращения?
выше animation стенография плотная. он может нести имя ключевого кадра, продолжительность, временную функцию, задержку, счет итерации, направление, режим заполнения и состояние воспроизведения, все в одной строке, и порядок имеет значение для двух значений времени точно так же, как это происходит для переходов. Этот генератор сначала записывает имя, затем продолжительность и временную функцию, затем необязательную задержку, затем счет итерации, направление и режим заполнения, например animation: fadeIn 0.6s ease 1 both. Первое написание имени является законным, поскольку имена ключевых кадров не являются ключевыми словами CSS, и оно читается более четко, чем зарывание имени в конце.
Единственное правило, которое ловит всех, это два значения времени. продолжительность и задержка оба раза, и CSS говорит им отдельно только по позиции: первое значение времени - это продолжительность, а второе - задержка. Все остальное в стенографии является ключевым словом или единичным числом, поэтому его нельзя спутать со временем. Вот почему инструмент может безопасно сократить задержку, когда она равна нулю, потому что без единицы измерения 1 или слово infinite далее безошибочно следует счетчик итераций, а не второй раз. Генератор также опускает любое значение, равное его стандарту CSS, поэтому a normal направление или а none режим заполнения никогда не загромождает вывод. Результатом является сокращение, которое читает то, как вы бы написали его вручную, когда узнали правила.
Почему моя CSS-анимация не воспроизводится?
Это обрыв, и почти все сходят с него хотя бы один раз. Единственная наиболее распространенная причина - несоответствие между animation-name и имя в @keyframes правило. опечатка, разница заглавных букв или имя, которое было переименовано в одном месте, а не в другом, оставляет браузеру без правила ключевого кадра, к которому можно было бы привязаться, поэтому он молча ничего не делает. нет ошибки и предупреждения; элемент просто сидит там. Поскольку этот генератор записывает обе половины вместе из одного имени, исчезает весь класс ошибок, что составляет большую часть точки.
Другие причины стоит знать, потому что они появляются, когда вы рукописные анимации. длительность ноль означает, что анимация завершается мгновенно, и вы никогда ее не видите. элемент, который есть display: none не запускает свои анимации вообще, поэтому затухание, которое зависит от отображаемого элемента не будет срабатывать. отсутствующее или неправильно написанное свойство внутри ключевого кадра тихо игнорируется, а не помечается. И анимация с animation-fill-mode: none, по умолчанию, возвращает элемент к его единогласным стилям в тот момент, когда он заканчивается, что может выглядеть так, будто он никогда не запускался, если движение было тонким. Наблюдение за анимацией в предварительном просмотре в реальном времени покрывает большую часть из них за секунды, что относится к движению здания, где вы можете его увидеть, а не к файлу, который вы продолжаете перезагружать.
Что делает режим анимации-заполнения?
Режим заполнения - это настройка, которую люди понимают последней и в которой нуждаются больше всего. Он решает, какие стили элемент показывает за пределами активного окна 's, как до его запуска во время любой задержки, так и после его завершения. по умолчанию, none, означает элемент игнорирует первый и последний ключевые кадры, когда анимация не запущена, поэтому он сидит в своих обычных стилях перед анимацией и огрызается обратно к ним после. Этот снимок является источником очень распространенного разочарования: вы оживляете элемент, чтобы исчезнуть, он красиво исчезает, а затем снова исчезает в момент окончания анимации, потому что с none финал opacity: 1 ключевой кадр отбрасывается после завершения анимации.
Исправление есть animation-fill-mode: forwards, который сохраняет последний ключевой кадр, примененный после завершения анимации, поэтому затухающий элемент остается видимым. backwards применяет первый ключевой кадр во время любой задержки до начала анимации, что полезно, когда у вас есть задержка и вы не хотите, чтобы элемент сначала мигал в состоянии по умолчанию. both делает и то, и другое одновременно и является самым безопасным общим выбором для входной анимации, поэтому этот генератор по умолчанию использует новые анимации both. Понимание режима заполнения - это разница между входом, который приземляется, и входом, который сам себя расцепляет, и его гораздо легче понять, переключив его в предварительном просмотре и наблюдая за окончательным изменением, чем прочитав холодное описание спецификации.
Когда должен быть цикл анимации и как мне его контролировать?
Подсчет итераций решает, сколько раз выполняется анимация. Установите на положительное целое число, и анимация повторит это много раз, а затем остановится; установите это infinite и это зацикливается навсегда. зацикленные анимации - правильный выбор для окружающего, продолжающегося движения, спиннера, который показывает, что происходит работа, импульса, который поддерживает вызов к действию, тонкого плавания, которое дает герою образ некоторой жизни. Однократные анимации, запускаются один раз, предназначены для входов и выходов, где движение имеет четкое начало и конец и повторение его будет отвлекать.
Направление соединяется со счетом итераций, чтобы определить, как выполняется каждый проход. По умолчанию normal воспроизводит каждую итерацию от первого ключевого кадра до последнего. reverse играет каждый назад. alternate запускает первый пас вперед, а следующий назад, используя пинг-понг между конечными точками, именно так вы создаете плавный импульс вперед и назад, не определяя обратный путь в ключевых кадрах. alternate-reverse начинается назад и чередуется оттуда Генератор обнажает все четыре, чтобы вы могли почувствовать разницу: импульс с alternate вдыхает и выдыхает естественным путем, в то время как те же ключевые кадры с normal и четное количество шагов должно кодировать возврат самостоятельно. Для зацикливания движения, alternate почти всегда дает более органичный результат с меньшим количеством работы с ключевыми кадрами.
Какие свойства мне следует анимировать для обеспечения плавной работы?
Свойства, которые вы анимируете, решают, будет ли движение проходить с гладкими шестьюдесятью кадрами в секунду или заикается, и выбор такой же, как и для переходов. Предпочитать transform а opacity. Оба могут быть переданы в наборщик и анимированы без пересчета браузером макета страницы, поэтому они остаются гладкими даже на скромном оборудовании и под нагрузкой. Вот почему карта скользит вверх transform: translateY чувствует себя непринужденным, пока та же карта анимирована top или margin-top кажется грубым. Каждый вход предустановлен в этом генераторе построен на transform а opacity именно по этой причине.
Свойства, позволяющие избежать анимации в последовательности ключевых кадров, - это те, которые запускают макет: width, height, top, left, margin а padding. Изменение любого из этих заставляет браузер перевычислять геометрию элемента и всего, что вокруг него на каждом кадре, что дорого и является наиболее распространенной причиной джанки-анимации, усугубляемой, когда анимация зацикливается и платит непрерывно. Если вы хотите, чтобы элемент рос, а transform: scale почти всегда дешевле, чем анимация width а height, и это выглядит почти идентично. более широкий аргумент в пользу сборки набора инструментов, которые направляют вас к дешевому пути, находится в Набор инструментов для веб-разработчиков часть и привычки рабочего процесса, которые делают движение быстрым, а не медленным решением, находятся в силе Инструменты повышения производительности разработчик гид.
Как генератор сохраняет честность предварительного просмотра?
Каждый визуальный конструктор рискует предварительный просмотр и экспортированный код раздвинуться, пока инструмент не научит вас значению, которое не будет воспроизводиться. Этот генератор вводит точное @keyframes правило, оно выводит на страницу и применяет точное animation сокращать он показывает вам элемент предварительного просмотра, поэтому движение, которое вы смотрите, является движением, которое будет производить ваш скопированный CSS. не существует отдельного пути анимации, который мог бы не согласиться, и имя ключевого кадра в предварительном просмотре является именем в выводе.
Поскольку анимация работает на монтировании, а затем завершается, предварительный просмотр нуждается в способе воспроизведения, который инструмент обрабатывает, перемонтируя элемент предварительного просмотра при нажатии на повтор. Это отражает то, как одноразовая анимация ведет себя в производстве, где она воспроизводится, когда элемент появляется, а затем удерживает свое окончательное состояние в соответствии с режимом заполнения. Выходные данные также остаются минимальными, теряя нулевую задержку и любое значение по умолчанию, поэтому вы копируете только значимые объявления, ту же дисциплину, заключающуюся в испускании ничего избыточного, что проходит через Генератор фильтров CSS и другие визуальные строители. Когда вы сочетаете анимацию ключевого кадра с макетом, который позиционирует элемент, генератор flexbox является естественным спутником для строительства окружающей конструкции.
Какие браузеры поддерживают CSS-анимацию?
CSS-анимации поддерживаются в каждом текущем браузере и существуют уже более десяти лет. The @keyframes правило, animation стенография и все ее длинные руки универсальны и непредопределены, поэтому выходные данные этого генератора работают в Chrome, Firefox, Safari и Edge без префиксов поставщиков или запасных частей. окончательной ссылкой является спецификация CSS Animations Level 1 от W3C, которая является основным источником того, как ведет себя каждая часть стенографии, и ее стоит прочитать, как только генератор даст вам физическое представление о том, что делают части. Для доступности помните, что некоторые пользователи устанавливают prefers-reduced-motion предпочтение, и это хорошая практика, чтобы обернуть несущественную анимацию цикла в медиа запрос, который уважает его, так что окружающее движение может быть отключено для людей, которые находят его неудобным.
Если вы собираете более широкий набор визуальных инструментов CSS, генератор переходов и Генератор преобразований CSS сядьте естественно рядом с этим, поскольку преобразования являются сырьем, большинство из этих анимаций перемещаются, а переходы обрабатывают изменения состояния, анимации этого не делают. Здесь все работает на стороне клиента, и CSS, который вы копируете, вы можете использовать без выполнения, без шага сборки и без зависимости.
Часто задаваемые вопросы
Что такое генератор CSS анимации?
Генератор CSS-анимации - это визуальный инструмент, который создает анимацию ключевого кадра из выбранных вами настроек. Вы выбираете предустановку, устанавливаете продолжительность, облегчение, задержку, количество и направление итераций, и он выводит @keyframes правило и animation стенография вместе с предварительным просмотром в реальном времени, который вы можете воспроизвести.
В чем разница между CSS-анимацией и CSS-переходом?
Переход анимирует одно изменение между двумя состояниями, и для его запуска требуется триггер, например наведение. Анимация следует за a @keyframes последовательность с любым количеством шагов, может зацикливаться и запускается самостоятельно, как только она применяется, не дожидаясь изменения состояния.
Какой порядок использует анимационная стенография?
Этот инструмент сначала записывает имя ключевого кадра, затем продолжительность, временную функцию, задержку, счет итерации, направление и режим заполнения, например анимацию: fadeIn 0.6s облегчает 1 и то, и другое. Первое значение времени всегда является продолжительностью, а второе - задержкой, поэтому одно значение времени считывается как продолжительность.
Как мне навсегда создать цикл анимации CSS?
Установите счетчик итерации в бесконечное В сокращенном виде, то есть слово бесконечное, как в анимации: спин 1s линейный бесконечный Любое положительное целое число вместо этого повторяет анимацию, которая много раз, а затем останавливается в соответствии с режимом и направлением заполнения.
Почему моя CSS-анимация не воспроизводится?
Наиболее распространенной причиной является несоответствие между именем анимации и именем @keyframes, включая опечатку или разницу в регистре, из-за чего в браузере нет правила, к которому можно было бы привязаться. Также проверьте, что продолжительность выше нуля и что элемент визуализируется, поскольку анимация на дисплее: ни один элемент не запускается.
Что делает свойство анимация-режим заполнения?
Режим заполнения решает, какие стили показывает элемент до начала анимации и после ее окончания. Ни один из них по умолчанию не возвращает элемент к его обычным стилям, когда анимация заканчивается. Настройка вперед сохраняет последний ключевой кадр, обратная связь применяет первый ключевой кадр во время задержки, и оба делают и то, и другое.
Какие свойства мне следует анимировать для обеспечения плавной работы?
Предпочитают преобразование и непрозрачность. браузер может анимировать их на композиторе без пересчета макета, поэтому они остаются плавными на уровне 60 кадров в секунду. Анимация ширины, высоты, верха, левого или поля приводит к перерасчету макета на каждом кадре, что является обычной причиной заикания анимации.
Является ли созданный анимационный CSS бесплатным и безопасным в использовании?
Да. инструмент совершенно свободен без регистрации или ограничений использования, и он излучает стандартный, неперефиксированный CSS, поддерживаемый в каждом современном браузере. Вся обработка происходит в вашем браузере, поэтому ничего не загружается, и инструмент работает в автономном режиме после загрузки.
