Keyframes css не работает

Анимация keyframes не работает в chrome и Safari

Добрый день!
вот код анимации keyframes. Он корректно работает а эдже, файрфоксе и опере, но абсолютно игнорируется хромом и сафари. ХЭЛП!

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Анимация @keyframes
Как сделать,чтобы после анимации @keyframes анимация не возвращалась назад, пока не отведешь мышь.

Анимация на сайте (@keyframes)
Приветствую Кто знает кросс браузерное решение для — @keyframes, а если быть точнее, то для IE 21

Решение

EkaSmi, у меня в хроме все работает

попробуйте добавить -webkit-background-size
если не поможет укажите абсолютный размер а не в процентах

и покажите всю верстку

Fedor92,
в вашем rar все работает.
Но когда ваш код подключаю к своей странице через

div safari,chrome потягушечки
Во всех браузерах отображается, так как и задумывалось, за исключением safari и chrome. В них не.

@keyframes кроме хрома нигде не работает
Префиксы проставлены — верней один для вебкита на нем и работает, в других нет, другая анимация на.

overflow: hidden in Chrome, Safari, Opera
Всем привет! Необходимо сверстать PSD для Joomla, все сделал, но вот в одном месте наткнулся на.

Выравнивание сработало только в FF, в Chrome/IE/Safari нет
Мой вопрос вероятно связан с особенностями разных браузеров, в чем я не сильна. Мой код Почему то.

Источник

Правило @keyframes: некоторые варианты не работают в IE и Firefox

Здравствуйте, уважаемые!
Прошу помощи в следующей проблеме:
делаю анимацию через правило @keyframes, в анимации задействованы несколько свойств, всё прекрасно работало во всех основных браузерах, причем без префиксов, пока не попробовал задать таким же образом смену фоновой картинки. В Хроме это работает тоже, а вот в IE и Firefox — ни в какую! Пробовал и с префиксами и без — не работает. при этом остальные свойства анимируются нормально.

Код примерно такой:

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Не работают некоторые кнопки и не заполняются некоторые поля во всех браузерах
Добрый день! Не работают некоторые кнопки и не заполняются некоторые поля во всех браузерах.

Неправильно отображаются некоторые страницы в firefox
Версия 50.0, но то же самое было и на предыдущей, которую я снёс и установил новую в процессе.

В слове угаданы некоторые буквы, надо рассмотреть все возможные варианты.
Помогите пожалуйста решить задачу в borland c++ В слове угаданы некоторые буквы, надо.

Не работают некоторые IF
Здравствуйте. Есть участок кода: if checkbox2.Checked=true and checkbox3.Checked=false and.

Источник

@keyframes не работает в IE

Здравствуйте, вот код анимации:

Помощь в написании контрольных, курсовых и дипломных работ здесь.

В Хроме не правильно работает keyframes
Помогите пожалуйста, в гугл хроме появились дополнительные фотографии, не знаю в чем проблема. Сама.

@keyframes кроме хрома нигде не работает
Префиксы проставлены — верней один для вебкита на нем и работает, в других нет, другая анимация на.

Анимация keyframes не работает в chrome и Safari
Добрый день! вот код анимации keyframes. Он корректно работает а эдже, файрфоксе и опере, но.

Анимация @keyframes
Как сделать,чтобы после анимации @keyframes анимация не возвращалась назад, пока не отведешь мышь.

Убрал, но все равно не работает

Добавлено через 1 минуту
Анимация такая — во-первых это логотип(svg), он собирается весь с анимациями за 1.5s(в этом время он расположен в центре экрана с шириной 250px), после того, как он собрался этот логотип «перелетает» в верхнюю часть экрана с top: 21px, и ширина у него становиться 150px

CSS keyframes
Всем привет. Возникла интересная проблема, буду признателен всем, кто поможет ее решить. Есть код.

@-moz-keyframes button
Пример только для изучения анимации. На 80% кнопочка получает свои background-color и color, но на.

2 параллельных keyframes синхронны?
Всем привет! Есть 2 DIV, которые лежат внутри 1 родителя. Первый DIV вращается с помощью.

Источник

При добавлении класса анимация с keyframes работает, а при удалении нет, хотя transition задано

В этом примере все достаточно очевидно и отрабатывает правильно

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

Как мне необходимо организовать код, чтобы анимация по клику отрабатывала «в обе стороны»?

2 ответа 2

Анимации (animation), в отличие от переходов (transition), работают только в одну сторону. Переключение направления нормально не поддерживается.

Вообще-то существует свойство animation-direction , но оно не поможет, потому что, если имя анимации не меняется, то элемент продолжает «проигрывать» одну и ту же последовательность. Если изменить направление, то анимация будет всё ещё в завершённом состоянии, и просто изменится конечное значение, которое браузер и применит моментально. И удаление имени анимации animation-name не поможет, потому что в этом случае сбросится и конечное значение, что вас не устроит ( animation-fill-mode у вас both ). Что касается переходов, то они существуют отдельно от анимаций, анимировать одни и те же свойства двумя способами бессмысленно, а свойства переходов на анимации не влияют.

Если хотите анимировать в обе стороны, то нужно использовать или анимации с двумя отдельными @keyframes для каждого направления, или переходы, которые поддерживают изменение направления.

Источник

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

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

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

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

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

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

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

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

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

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

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

В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют percentage , чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% её конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to .

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

Примеры

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

Этот простой пример анимирует скольжение текста в элементе

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

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

В стиле для элемента

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

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

Ключевые кадры определяются с помощью правила @keyframes (en-US) . В данном случае мы имеем только два ключевых кадра. Первый при 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-свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.

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

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

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

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

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

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

Добавление CSS

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

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

Будем использовать 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

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

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

Источник