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

@EkaSmi · Регистрация: 19.08.2015

Студворк — интернет-сервис помощи студентам

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
background: url('images/main_bg.jpg') no-repeat #003055;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    position: relative;
    z-index: 2;
    animation: myfirst 30s ease alternate infinite;
    -webkit-animation: myfirst 30s ease alternate infinite;
    -moz-animation: myfirst 30s ease alternate infinite;
    -ms-animation: myfirst 30s ease alternate infinite;
    -o-animation: myfirst 30s ease alternate infinite;
}
@keyframes myfirst
{
from   {background-size: 100%;}
to {background-size: 120%;}
}
@-moz-keyframes myfirst
{
from   {background-size: 100%;}
to {background-size: 120%;}
}
@-webkit-keyframes myfirst
{
from   {background-size: 100%;}
to {background-size: 120%;}
}
@-o-keyframes myfirst
{
from   {background-size: 100%;}
to {background-size: 120%;}
}
@-ms-keyframes myfirst
{
from   {background-size: 100%;}
to {background-size: 120%;}
}

@cyber1 · 24.08.2015, 14:37

наверное ошибка где-то в другом месте, можно ссылку на сайт?

@whiteapps · 24.08.2015, 14:41

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

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

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

@EkaSmi · 25.08.2015, 19:28 **[ТС]**

Заработало! Спасибо.
НО! в IE не работает. IE 11
Что делать?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#top{ 
 min-width: 1500px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  height: 730px;
background: url('images/main_bg.jpg') no-repeat #003055;
-moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ Рё Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* РЎРѕРІСЂРµРјРµРЅРЅС‹Рµ Р±СЂР°СѓР·РµСЂС‹ */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    position: relative;
    z-index: 2;
    animation: myfirst 30s ease alternate infinite;
    -webkit-animation: myfirst 30s ease alternate infinite;
    -moz-animation: myfirst 30s ease alternate infinite;
    -ms-animation: myfirst 30s ease alternate infinite;
    -o-animation: myfirst 30s ease alternate infinite;
}

@rep plz · 25.08.2015, 20:04

EkaSmi, что за сайт?

@whiteapps · 26.08.2015, 10:25

EkaSmi, покажите все стили какие у вас прописаны на текущий момент и верстку

@EkaSmi · 26.08.2015, 16:39 **[ТС]**

samosystem.ru/samosystem

@cyber1 · 26.08.2015, 17:09

такое explorer 11 не знает

CSS
1
2
3
4
5
@-ms-keyframes myfirst
{
from   {-ms-background-size: 100%;}
to {-ms-background-size: 120%;}
}

заменяем на

CSS
1
2
3
4
5
@-ms-keyframes myfirst
{
from   {background-size: 100%;}
to {background-size: 120%;}
}

Добавлено через 2 минуты
если делаете под современные браузеры то @-ms-keyframes не нужен, оставляете только псевдоэлементы вебкита.

@EkaSmi · 27.08.2015, 13:34 **[ТС]**

все равно не работает

@cyber1 · 27.08.2015, 14:36

Сообщение от EkaSmi

все равно не работает

угу, походу баг в Explorer. Вам придется масштабировать не картинку а сам контейнер, и засунь его в другой контейнер со свойством

CSS
1
overflow:hidden

@Fedor92 · 27.08.2015, 15:53

EkaSmi, работает всё... Вам придётся под браузеры делать раздельные стили под keyframes, если хотите, чтобы исходный код работал... ИМХО в ие я бы вообще keyframes отключил...
Наслаждайтесь анимацией в ие...

test.rar

@cyber1 · 27.08.2015, 15:58

Сообщение от Fedor92

Наслаждайтесь анимацией в ие

в ие не работает ваша анимация. Использую версию 11.

@Fedor92 · 27.08.2015, 16:02

cyber1, плохо используете...

@cyber1 · 27.08.2015, 16:05

Сообщение от Fedor92

cyber1, плохо используете

как понять?
запустил в mozila - есть анимация
запустил в ie - нет.
или там тоже надо искать в чем причина?)

@Fedor92 · 27.08.2015, 16:08

cyber1, если не умеете смотреть код лучше не смотрите... В мозиле нет анимации там всё дёргается...

Броузер у Вас теперь стоит в режиме эмуляции ie7, а Вы чего-то доказать пытаетесь... Может Вам ещё видео снять?

@cyber1 · 27.08.2015, 16:11

Сообщение от Fedor92

а Вы чего-то доказать пытаетесь

я и не собираюсь Ваш код смотреть. Я запустил Ваш пример, в котором обещалась анимация в Explorer,

Сообщение от Fedor92

Наслаждайтесь анимацией в ие...

,
и никакой анимации я там не увидел.

@Fedor92 · 27.08.2015, 16:13

cyber1, Ваши проблемы, анимация делалась в первую очередь для ТС...

@cyber1 · 27.08.2015, 16:18

Сообщение от Fedor92

cyber1, Ваши проблемы, анимация делалась в первую очередь для ТС

какие еще проблемы? не надо не тематических сообщений. Мы тут для того, чтоб подсказывать друг другу, а не проблемы придумывать. И что такое ТС - не каждый поймет, подробнее пожалуйста.

@EkaSmi · 27.08.2015, 19:21 **[ТС]**

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

HTML5
1
2
3
4
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style-for-ie.css" />
<![endif]-->

@Fedor92 · 27.08.2015, 20:25

Сообщение от EkaSmi

Но когда ваш код подключаю к своей странице через

Примерно это я и подразумевал под раздельным стилем...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@cyber1 4 / 4 / 4 Регистрация: 09.06.2015 Сообщений: 195
	24.08.2015, 14:37
	наверное ошибка где-то в другом месте, можно ссылку на сайт? 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	24.08.2015, 14:41
	Сообщение было отмечено whiteapps как решение Решение EkaSmi, у меня в хроме все работает попробуйте добавить -webkit-background-size если не поможет укажите абсолютный размер а не в процентах и покажите всю верстку 0

@rep plz Заблокирован
	25.08.2015, 20:04
	EkaSmi, что за сайт? 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	26.08.2015, 10:25
	EkaSmi, покажите все стили какие у вас прописаны на текущий момент и верстку 0

@EkaSmi 0 / 0 / 0 Регистрация: 19.08.2015 Сообщений: 10
	26.08.2015, 16:39 [ТС]
	samosystem.ru/samosystem 0

@EkaSmi 0 / 0 / 0 Регистрация: 19.08.2015 Сообщений: 10
	27.08.2015, 13:34 [ТС]
	все равно не работает 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	27.08.2015, 15:53
	EkaSmi, работает всё... Вам придётся под браузеры делать раздельные стили под keyframes, если хотите, чтобы исходный код работал... ИМХО в ие я бы вообще keyframes отключил... Наслаждайтесь анимацией в ие... test.rar 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	27.08.2015, 16:02
	cyber1, плохо используете... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	27.08.2015, 16:08
	cyber1, если не умеете смотреть код лучше не смотрите... В мозиле нет анимации там всё дёргается... Броузер у Вас теперь стоит в режиме эмуляции ie7, а Вы чего-то доказать пытаетесь... Может Вам ещё видео снять? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	27.08.2015, 16:13
	cyber1, Ваши проблемы, анимация делалась в первую очередь для ТС... 0

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

Решение