Css — Проблемы с css-анимацией

Содержание

Хитрости CSS анимации

1. Быстрый переход в другое состояние во время анимации

Вот так с помощью переключения между значениями свойств opacity и text-shadow я получил эффект, имитирующий мерцание света рекламного щита.

2. Отрицательные задержки анимации

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

Ниже приведен пример, в котором анимации всех кругов начинаются немедленно и в разных точках анимационного цикла:

3. Пропорции в анимации

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

Во многих анимациях я использую элементы с пропорциональными чему-либо значениями ширины и высоты: например, окружности и прямоугольники. Возможно, вы думаете, что я применяю для этого фиксированные значения ширины и высоты? Но это не так. Для этого я могу использовать значение ширины в процентах, высоту, равную нулю и значение padding, также заданное в процентах. Свойство padding-bottom – это хитрость, необходимая для того, чтобы сохранять пропорцию по отношению к ширине:

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

4. Изменение свойства transform-origin посреди анимации

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

Недостаток этого трюка заключается в том, что мы не можем использовать здесь свойство animation-mode: forwards; только лишь для части анимации. Это означает, что нам нужно перемещать элемент в эквивалентное положение перед тем, как применять изменение свойства transforma-origin . В примере выше это достигнуто применением переходов, чтобы имитировать эффекты вращения. Однако использование данной техники в более сложных примерах может стать слишком утомительным. Смотрите пример : пирамида-феникс.

5. Отрицательное значение свойства transform-origin

Для свойства transform-origin можно задать отрицательное значение. Это можно использовать, например, в создании траекторий кругового движения. Вместо того, чтобы отдельно задавать значения translate и rotate для одного элемента, мы можем пойти более простым путем. Мы можем применить отрицательные значения transform-origin и второй элемент или псевдоэлемент (или только один элемент, если мы хотим, чтобы он вращался и двигался по круговой траектории). Варьируя различные негативные значения свойства transform-origin , мы можем применять эту анимацию для множества элементов, при этом для каждого из них будет сохранено круговое движение.

6. Чудеса с box-shadow

Для анимации простых, не содержащих контента форм можно применить свойство box-shadow. Данное свойство может создавать различные края у круглых элементов. С помощью данной техники, применив разные виды смещения, из элементов HTML можно создавать новые анимационные «фигуры». Образец ниже демонстрирует возможности данной техники. Мы создали шесть круглых элементов, двигающихся по круговой траектории. Для этого был взят всего лишь один элемент с применением к нему свойства box-shadow и смещения (offset).

К сожалению, проценты не поддерживаются свойствами внутренней тени, поэтому они не так легко ложатся в код, как родные элементы HTML. Но их все же можно изменить в анимации вручную или с использованием transform:scale(n) для элемента HTML, частью которого они являются.

7. Используем псевдо-элементы

Как с box-shadow, псевдоэлементы можно использовать, чтобы добавить больше контента на страницу. У них могут быть отдельные от родителя анимации, собственные внутренние тени, и вообще они очень похожи на дочерние элементы без разметки HTML. Давайте создадим анимацию на основе одного элемента, как в примере ниже.

Здесь все большие окружности вокруг среднего вспыхивающего круга, а также две маленькие окружности с краю (расположенные друг напротив друга) – внутренние тени главного элемента. Остальные две маленькие окружности являются частью внутренней тени псевдоэлемента, а кольцо из черточек – SVG, который используется как фон для другого псевдоэлемента.

Возможные проблемы с z-index

Я, наверное, потратил больше времени, исправляя проблемы с z-index в моей анимации, чем на все остальное. В разных случаях z-index отображается по-разному. В случае с анимациями, основная разница заключается в том, что Webkit, например, анимирует значения z-index, тогда как Mozilla этого не делает (вместо этого элементы перескакивают от одного z-index к другому).

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

Последняя проблема в отношении z-index – свойство прозрачности. Если прозрачность элемента установлена на какой-либо отметке, кроме дефолтной единицы, он приобретает собственный контекст наложения.

Я надеюсь, что эта статья поможет вам построить более впечатляющие творения, даже если вы ничего нового не узнали из нее :)!

CSS-анимации

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/css-animations.

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.

CSS transitions

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

Например, CSS, представленный ниже, 3 секунды анимирует свойство background-color .

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

При клике на эту кнопку происходит анимация её фона:

Есть всего 5 свойств, задающих анимацию:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

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

Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

Далее мы рассмотрим свойства анимации по отдельности.

transition-property

Список свойств, которые будут анимироваться, например: left , margin-left , height , color .

Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».

transition-duration

Продолжительность анимации, задаётся в формате CSS time, то есть в секундах s или ms .

transition-delay

Задержка до анимации. Например, если transition-delay: 1s , то анимация начнётся через 1 секунду после смены свойства.

Возможны отрицательные значения, при этом анимация начнётся с середины.

Например, вот анимация цифр от 0 до 9 :

Она осуществляется сменой margin-left у элемента с цифрами, примерно так:

В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:

Можно стартовать её «с середины», с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного transition-delay .

В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:

В JavaScript это делается дополнительной строкой:

transition-timing-function

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

Самое сложное, но при небольшом изучении – вполне очевидное свойство.

У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.

Кривая Безье

В качестве временной функции можно выбрать любую кривую Безье с 4 опорными точками, удовлетворяющую условиям:

  1. Начальная точка (0,0) .
  2. Конечная точка (1,1) .
  3. Для промежуточных точек значения x должны быть в интервале 0..1 , y – любыми.

Синтаксис для задания кривой Безье в CSS: cubic-bezier(x2, y2, x3, y3) . В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.

Она указывает, как быстро развивается процесс анимации во времени.

  • По оси x идёт время: 0 – начальный момент, 1 – конец времени transition-duration .
  • По оси y – завершённость процесса: 0 – начальное значение анимируемого свойства, 1 – конечное.

Самый простой вариант – это когда процесс развивается равномерно, «линейно» по времени. Это можно задать кривой Безье cubic-bezier(0, 0, 1, 1) .

График этой «кривой» таков:

…Как видно, это просто прямая. По мере того, как проходит время x , завершённость анимации y равномерно приближается от 0 к 1 .

Цукерберг рекомендует:  Установка и настройка красивого меню P30 Bubblemenu для Joomla 1.5.xx

Поезд в примере ниже с постоянной скоростью «едет» слева направо, используя такую временную функцию:

Css — Проблемы с css-анимацией

У использования CSS-анимаций есть несколько интересных (и удивительных) последствий для производительности, о которых не все знают. Я столкнулся с некоторыми из этих последствий, пока тестировал их для клиента в рекламной индустрии, который настаивал на том, что GSAP принят в качестве стандарта, поэтому я записал скринкаст, поясняющий что именно я обнаружил. Я решил, что было бы полезно поделиться этим:

Резюме

  • Шкала времени записи в инструментах разработчика Chrome не показывает загрузку процессора, связанную с CSS-анимацией трансформаций, поэтому люди часто неверно истолковывают (отсутстствующие) данные. Записи выглядят «чистыми» при CSS и «грязными» при JS, что приводит к ошибочным выводам о производительности.
  • Согласно диспетчеру задач Chrome, CSS-анимациии трансформаций нагружают процессор вдвое сильнее по сравнению с JS.
  • CSS-анимации вызывали больше задержек главного потока, чем JavaScript-анимации. Взаимодействие с пользователем обычно обрабатывается в главном потоке, и для пользователя это воспринимается как подтормаживание. Это особенно значимо, если вы анимируете трансформации одновременно с почти любым другим свойством.
  • У Webkit-браузеров есть проблемы синхронизации.
  • JavaScriptбыл быстрее чем CSS-анимации на каждом устройстве, на котором я запускал этот тест – единственным исключением было анимирование трансформаций в Webkit-браузерах (а тут как раз проявляются эти накладные расходы в главном потоке и проблемы синхронизации).
  • Для того, чтобы самостоятельно контролировать время/замедление компонентов трансформации (поворот, масштабирование, наклон, позиция) в CSS, вы должны создать DOM-ноду для каждого компонента, что отрицательно влияет на производительность. С JavaScript в таких обходных путях нет необходимости (см. примечание ниже).
  • Я люблюDevTools – я вовсе не придираюсь к ним. Эти вещи просто сложно измерить.
  • Делайте ваши собственные тесты! Не сильно доверяйте Dev Tools или моим тестам. Верьте собственным глазам, потому что в конечном итоге именно восприятие имеет самое важное значение для конечного пользователя. Важны как плавное движение, так и отзывчивый пользовательский интерфейс.

Ссылки

  • Исходный тест на Codepen
  • Пол Льюис из Google сравнивает CSS- и JS-анимации
  • Знаменитая статья Арии Хидаята про аппаратное ускорение CSS
  • Почему GSAP? – практическое руководство разработчика

Обновление: После записи видео, я сделал ещё несколько тестов, которые показали, что наибольший вклад в замедление в варианте с чистым CSS внесло то, что пришлось создать много вложенных элементов, чтобы добиться независимого управления компонентами трансформации. Другими словами, раздельное регулирование времени начала/конца (или темпа) поворота, масштабирования и позиции практически невозможно в чистом CSS, пока вы не вкладываете вещи таким вот образом, но это дается ценой существенных потерь в быстродействии. Когда вложенности можно было избежать, анимация одних трансформаций на чистом CSS выглядела более плавной в webkit-браузерах при сильной нагрузке и в основном не отличалась от оптимизированной JS-анимации при любых других уровнях нагрузки.

Важные комментарии к оригинальной статье

Комментарий Пола Айриша

Привет, Джек! Я поклонник GSAP и рекомендую его для многих случаев, но, к сожалению, кое-что в этом видео не совсем верно. Из-за того, что на видео было так много деталей, я отвечу про каждую из них по очереди.

Диспетчер задач. Вы показали только лишь один процесс браузера, а хотелось бы увидеть процесс отрисовки для отдельной вкладки (и GPU). Ваши результаты имеют смысл, потому что браузер берёт на себя обработку большинства анимаций вместо блокировки главного потока. Когда вы рассматриваете другие процессы, то оба подхода покажут практически одинаковые цифры.

FPS-счётчик. Это сложно, потому что мы полагаемся на счетчик FPS, написанный на JS, который работает в главном потоке, но нас-то интересует то, как часто пиксели выводятся на экран. Поскольку кадры при композиции слоев (в видеопроцессоре) и кадры в основном потоке — разные вещи, requestAnimationFrames не может измерять производительность CSS-анимаций. (API синхронизации кадров решит эту проблему). Я бы рекомендовал использовать FPS-счётчик во вкладке «Отображение» в инструментах разработчика.

Шкала времени, не показывающая затраты на CSS-анимацию. Да, это достаточно известный баг. Посмотрите, как хорошо всё выглядит в Canary. Вы увидите тяжёлые процессы пересчёта стилей в главном потоке.

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

Анимирование elem.style.top. Мы с вами знаем, что 1) анимирование свойства «top» не является эффективным выбором и 2) значения top не могут быть субпиксельными, поэтому они всегда округляются до целого числа. Как раз это и приводит к более заметным рывкам анимации, чем в случае транформаций. Однако, в вашем демо ни одна из этих причин на не является определяющим фактором, поэтому это скорее обострение проблем, описанных далее…

Это неправильный бенчмарк.

(Вы заметили это позже, когда закончили видео, но… вот оно.) В CSS-варианте есть ПЯТЬ div’ов, представляющих каждый красный бокс. В вашем GSAP-варианте только один. Это различие оказывает огромное влияние на цифры; размер DOM быстро раздувает затраты на перерасчет стилей.

Вам необязательно нужны пять div’ов на один бокс для CSS, хотя я признаю, что не очень изящно независимо обрабатывать анимации только лишь с одним элементом и одним блоком @keyframes. Несмотря на это, задача решаема.

Я (быстренько) немного подправил CSS, чтобы использовать один элемент, и призываю вас взглянуть на результат: http://codepen.io/paulirish/full/9712e8fb6a451e0ee7393d01e7f59f53/

Теперь, когда оба варианта используют только один элемент на бокс, производительность между ними полностью сопоставима. Попробуйте применить translate+scale+rotate или translate+top. Между CSS и GSAP нет существенной разницы.

В конечном итоге, в этом бенчмарке производительность CSS и GSAP оказалась одинаковой. У GSAP есть преимущество в разработке и манипулировании различными свойствами трансформации независимо, а преимущество CSS в том, что для них требуется меньше байтов.

Я по-прежнему рекомендую GSAP для максимального контроля и удобства разработки; он может воплощать самые смелые задумки в анимации, и явно лучший в своем классе.

Ответ Джека Дойла

Какой продуманный ответ, Пол! Спасибо за все разъяснения. Позвольте мне ответить вам тоже:

FPS-счётчик.

Цель не имела ничего общего с точным измерением того, как часто пиксели перекрашивались (я пытался объяснить это на видео, но, должно быть, плохо справился, и, видимо, название «FPS» для этого добавило путаницы). Единственной целью этого индикатора fps было измерение производительности главного потока, поскольку JS работает только там. Я хотел показать, что могут быть затраты в главном потоке, даже когда из CSS-анимаций работают только трансформации (которые, как считается, выполняются в другом потоке, так что логично ожидать, что производительность главного потока станет лучше, а не хуже). Если я бы мог сделать видео заново, я бы объяснил это лучше. Сожалею об этом.

Анимирование elem.style.top

Совершенно верно – спасибо, что помогли разобраться. Учитывайте, что моей целью было показать, что анимирование чего-либо кроме transform/opacity вместе с ними может вызвать проблемы с синхронизацией. Это может быть backgroundColor, padding, что угодно. «top» просто легче всего увидеть в тестах, вот и всё. Я согласен – в 98% лучше/быстрее анимировать положение, используя трансформацию (я видел случаи, когда top/left являлись гораздо более производительными, но это не показатель).

Это неправильный бенчмарк.

Вы сказали, что задача независимо контролировать компоненты трансформации (x/y/масштабирование/поворот) на одиночном элементе при помощи CSS-анимации выполнима – мне очень любопытно увидеть это. Ваш пример на codepen не решает эту задачу. Вместо этого, он работает со всеми компонентами одновременно. Вы не могли бы показать пример, который разделяет их должным образом? Это очень важно и является именно тем, что изначально побудило меня сделать весь этот тест – парень, написавший мне на почту, сообщил, что CSS-анимации могут делать всё то, что делает GSAP с точки зрения независимого контроля, но это требует вложенности, а я возражал, что вложенность, наверное, дается не даром, за нее приходится платить производительностью. Заметьте, что x/y анимируются в течение целых 10 секунд, но поворот происходит только в середине анимации (в течение 6-х секунд), а изменение масштаба только в конце (в течение 4-х секунд). Насколько мне известно, это просто невозможно при помощи CSS-анимаций (без вложенности). Разве я неправильно понимаю?

Ещё раз спасибо за то, что присоединились к беседе, Пол. Я испытываю огромное уважение лично к вам и всей команде Google. Вы, ребята, делаете потрясающие вещи для прогресса веба, особенно на фронтах борьбы за производительность.

Ответ Пола Айриша

= Производительность основного потока.

Понял вас. Да, имеет смысл. Мы обсуждали доступность времени простоя/загруженности процессора в API синхронизации кадров по схожим причинам.

Бенчмарк композиции слоёв

Я оговорился на счёт независимого управления компонентами трансформации.

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

Для меня главные выводы заключаются в следующем:

Если вам необходимо независимое управление трансформацией, JS существенно выигрывает, поскольку при подходе с чистым CSS количество элементов будет раздуваться. Если же нет, то производительность будет сравнима (предполагая, что оба подхода идеально реализованы).

CSS анимация без проблем

CSS анимация — относительно новая технология, которая будет активно развиваться ввиду своей простоты и удобства. Не все браузеры пока поддерживают анимацию, однако уже есть инструменты, помогающие разработчикам в создании «живых» объектов на своих страницах.

Цукерберг рекомендует:  Зарабатывай вместе с !

Я не буду углубляться, что такое css анимация — не об этом статья, да и информации в сети очень много. Вплотную работать с анимацией не приходилось, поэтому что попало рассказывать тоже не хочется. Не так давно я уже рассматривал небольшой css фреймворк для добавления 3D кнопок — вот статья на эту тему.

Сегодня же речь пойдет о небольшом фреймворке для работы с css анимацией — animate.css. Чем он хорош?

  • он кроссбраузерный (относительно, конечно) и некоторые проблемы совместимости решаются с помощью скрипта Modernizr
  • он бесплатный
  • он поддерживает 56(!) различных эффектов анимации
  • он очень легко встраивается в страницу

Фреймворк поставляется в виде одного css файла, который подключается как обычно:

После подключения осталось только назначить необходимые классы элементам:

Из этих трех классов фреймворком обрабатываются два — animation и flash. Первый указывает, что блок должен быть анимированным, второй — какой тип анимации нужно применить.

Больше ничего не нужно писать — все замечательно заводится и работает.
Пример работы
Остался еще один момент. Вам не нужно редактировать сам процесс анимации, однако — ее длительность нужно менять. Разработчик предусмотрел это, поэтому длительность можно указать непосредственно в описании стилей того элемента, которому назначена анимация.
Примерно так:

CSS файл фреймворка весит около 75 килобайт. Это много, поэтому разработчик разбил его на 56 файлов, для каждого типа анимации. Выбираете, что вам нужно и подключаете. Мелочь, а приятно.

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

Использование CSS-анимации

На этой странице

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

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

Есть три преимущества CSS-анимации перед традиционными способами:

  1. Простота использования для простых анимаций; Вы можете создать анимацию, не зная JavaScript.
  2. Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .
  3. Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.

Конфигурирование анимации

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

Свойство animation имеет следующие подсвойства:

animation-name Определяет имя @keyframes , настраивающего кадры анимации. animation-duration Определяет время, в течение которого должен пройти один цикл анимации. .»> animation-timing-function Настраивает ускорение анимации. animation-delay Настраивает задержку между временем загрузки элемента и временем начала анимации . animation-iteration-count Определяет количество повторений анимации; Вы можете использовать значение infinite для бесконечного повторения анимации. animation-direction Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию. animation-fill-mode Настраивает значения, используемые анимацией, до и после исполнения. animation-play-state Позволяет приостановить и возобновить анимацию.

Определение последовательности анимации с помощью ключевых кадров

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

В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как width, height, margin, padding, и font-size.»> percentage , чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to .

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

Примеры

Скольжение текста

Этот простой пример анимирует скольжение текста в элементе представляет собой абзац.»>

от правого края окна браузера.

Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство overflow : hidden .

с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для @keyframes , описывающей саму анимацию, определено как «slidein».

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

Kлючевые кадры определяются с помощью правила @keyframes . В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации ( from ). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок представляет собой абзац.»>

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

Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок представляет собой абзац.»>

приплывает к левому краю окна браузера.

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

Добавление других ключевыч кадров

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

Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

Настройка повторения

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

Движение текста вправо и влево

Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова «запрыгивает» за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству animation-direction значения alternate :

Использование шорткодов

Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:

можно заменить на:

Внимание: подробнее об этом на странице раздела animation

Установка нескольких значений свойствам анимации

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

В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:

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

В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px — 5s. Значения продолжительности закончились, теперь они берутся сначала — bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.

Использование событий анимации

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

Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть, как она работает.

Добавление CSS

Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться «sl > animation-direction установлено alternate . В ключевых кадрах @keyframes установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

Добавление обработчика события анимации

Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

Это довольно стандартный код; Вы можете получить дополнительную информацию в документации element.addEventListener() . Последнее, что делает этот код — это установка класса «slidein» для анимируемого элемента; мы делаем это, чтобы запустить анимацию.

Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса «slidein» для анимируемого элемента.

Регистрация событий

События будут передаваться функции listener() , показанной ниже.

Этот код также очень прост. Этот код следит за event.type , чтобы определить тип события, и добавляет элемент , чтобы залогировать произошедшее событие.

Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:

  • Started: elapsed time is 0
  • New loop started at time 3.01200008392334
  • New loop started at time 6.00600004196167
  • Ended: elapsed time is 9.234000205993652
Цукерберг рекомендует:  Проектирование тестируемого ПО на Java. Предлагаем вашему вниманию курс, посвященный тестированию.

Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие animationiteration ; вместо него посылается событие animationend .

Ради полноты картины приведем код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

css — Проблемы с анимацией CSS-анимации

Я поместил эту вещь типа перехода css вместе в notepad++, взглянув на некоторые примеры в Интернете, и в любом браузере он работал отлично. Теперь я копирую и вставлял код в большой проект веб-сайта в visual studio, и эффект перехода просто отказывается работать в Chrome и Firefox, но будет работать в IE. Я попытался удалить каждый родительский тег div, который я мог найти в проект и эффект анимации все еще не сработали. Он просто загружает все три изображения, как обычный html без css. Любые идеи были бы удивительными.

    2 1
  • 26 июн 2020 2020-06-26 16:22:50
  • Xearo

1 ответ

Одна из проблем заключается в том, что у вас есть два идентификатора на вашем div, если вам нужно несколько селекторов, вы должны вместо этого использовать класс/классы. Попробуй это:

CSS-анимации

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/css-animations.

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.

CSS transitions

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

Например, CSS, представленный ниже, 3 секунды анимирует свойство background-color .

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

При клике на эту кнопку происходит анимация её фона:

Есть всего 5 свойств, задающих анимацию:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

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

Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

Далее мы рассмотрим свойства анимации по отдельности.

transition-property

Список свойств, которые будут анимироваться, например: left , margin-left , height , color .

Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».

transition-duration

Продолжительность анимации, задаётся в формате CSS time, то есть в секундах s или ms .

transition-delay

Задержка до анимации. Например, если transition-delay: 1s , то анимация начнётся через 1 секунду после смены свойства.

Возможны отрицательные значения, при этом анимация начнётся с середины.

Например, вот анимация цифр от 0 до 9 :

Она осуществляется сменой margin-left у элемента с цифрами, примерно так:

В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:

Можно стартовать её «с середины», с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного transition-delay .

В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:

В JavaScript это делается дополнительной строкой:

transition-timing-function

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

Самое сложное, но при небольшом изучении – вполне очевидное свойство.

У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.

Кривая Безье

В качестве временной функции можно выбрать любую кривую Безье с 4 опорными точками, удовлетворяющую условиям:

  1. Начальная точка (0,0) .
  2. Конечная точка (1,1) .
  3. Для промежуточных точек значения x должны быть в интервале 0..1 , y – любыми.

Синтаксис для задания кривой Безье в CSS: cubic-bezier(x2, y2, x3, y3) . В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.

Она указывает, как быстро развивается процесс анимации во времени.

  • По оси x идёт время: 0 – начальный момент, 1 – конец времени transition-duration .
  • По оси y – завершённость процесса: 0 – начальное значение анимируемого свойства, 1 – конечное.

Самый простой вариант – это когда процесс развивается равномерно, «линейно» по времени. Это можно задать кривой Безье cubic-bezier(0, 0, 1, 1) .

График этой «кривой» таков:

…Как видно, это просто прямая. По мере того, как проходит время x , завершённость анимации y равномерно приближается от 0 к 1 .

Поезд в примере ниже с постоянной скоростью «едет» слева направо, используя такую временную функцию:

Проблемы с CSS-анимацией

Я хочу, чтобы кубики оставались на месте и вращались на оси 360 градусов. Мои кубики вращаются на оси 360 градусов. но анимация сходит с ума, и кубы тоже сдвигаются. Как я могу их повернуть на месте?

Я никогда раньше не работал над преобразованиями, но я попробовал,

Посмотрев на ваш CSS, я подумал, что класс .wrap должен иметь атрибуты left и position поэтому добавил эти атрибуты и удалил left атрибут из .cube div

Я изменил твой код

Для исправления сумасшедшего поворота измените приведенный ниже код

здесь вы не упомянули 0% времени, что должна делать анимация, поэтому она сходит с ума, после достижения 5% времени (0,5 секунды) она начинает вращаться на 360 по оси Y

Я изменяю на 0%, поэтому от начала до конца он будет вращаться на 360 градусов по оси Y.

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

Проблемы с анимацией CSS-анимации

Я поместил этот элемент типа перехода CSS вместе в блокнот ++, взглянув на некоторые примеры в Интернете, и он отлично работал в любом браузере. Теперь я копирую и вставлял код в большой проект веб-сайта в visual studio, и эффект перехода просто отказывается работать в Chrome и Firefox, но будет работать в IE . Я попытался удалить каждый родительский тег div, который я мог найти в проект и эффект анимации все еще не сработали. Он просто загружает все три изображения, как обычный Html без css. Любые идеи были бы удивительными .

Неправильное использование анимации CSS3 или нет?

Хорошо, я начал использовать некоторые анимации CSS3 пару дней назад. После жесткого кодирования я начал пробовать различные инструменты, такие как версия предварительного просмотра Adobe Edge.

Я сделал короткую анимацию, чтобы получить функциональность инструмента http://things.eyemade.ch/css3edge/

После этого кто-то в Twitter взглянул на него и сказал, что неправильно использовать divs для рисования подобных вещей. Но я не уверен в этом. За последние годы все изменилось, и если мы будем помнить, что этот материал будет использоваться во многих сетевых /мобильных играх, разве действительно неправильно использовать divs таким образом в наши дни?

5 ответов

Все изменилось за последние годы, и если мы будем помнить, что этот материал будет использоваться во многих веб-играх, , действительно ли неправильно использовать divs таким образом в наши дни ?

[акцент мой]
Да, использование divs просто ради создания анимации — неправильный подход. Это не умаляет элегантность или красоту вашей анимации, но это просто неправильный инструмент для работы.

Цель анимации CSS — предоставить анимации, связанные с определенным стилем. Добавление эффекта скольжения или выцветания в раскрывающееся меню было бы примером, когда анимации CSS являются частью стиля. CSS-Tricks использует анимации повсюду, например, цвет меню заголовка изменяется при загрузке страницы. Эти эффекты являются частью стиля страницы и не привязаны к разметке

Созданный вами пример сильно привязан к элементам в HTML, и ни одно из них не является содержательным (семантически прозрачным). Было бы лучше сохранить анимацию в отдельном не-циклическом .gif или SVG , который можно анимировать и стилизовать с помощью CSS & JavaScript.

Каковы [эффекты] неправильной семантики с этой анимацией для [конечного пользователя]?

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

An имеет [alt] атрибут с целью объяснения его содержания в контексте. Если вы используете кучу

Для знакомого пользователя, вероятно, не будет никакой проблемы. Помимо доступности, на самом деле нет проблемы с использованием анимации CSS, чтобы создать автономную анимацию. Это не делает его хорошим инструментом для использования. В качестве аналогии, если вам нужно прибить две доски вместе, вы можете использовать ручку отвертки вместо молотка. Оба получат работу в нормальных условиях; однако один инструмент, очевидно, лучше подходит для использования с ногтями.

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

). Это также означает, что для этих

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

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

Согласитесь с mjfgates. Конвенция существует по определенной причине. Если вы считаете, что причина устарела, не стесняйтесь экспериментировать. Тем не менее, существует конвенция, которая облегчает другим читать ваш код. Если вам все труднее понять, как вы делаете то, что делаете, то

  • имеют очень вескую причину,
  • документируйте его очень хорошо,
  • не публиковать его,
  • или вообще не делайте этого.
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих