CSS keyframes

@doomeCK · Регистрация: 04.02.2015

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

Всем привет. Возникла интересная проблема, буду признателен всем, кто поможет ее решить. Есть код перемещения изображения (background-image) с использованием keyframes, при наведении. В Firefox все работает нормально. В IE, как ни странно, возникает следующая проблема: код работает до того, как начинаем использовать "calc" внутри keyframes. Как только добавляем туда эту функцию, изображение в IE просто прыгает, безо всякого плавного перемещения. Вот пример:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
    <title>TEST</title>
    <meta charset="UTF-8">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN">
    <style>
        @keyframes keys {
            0% {background-position: calc(100% + 10px) 0px;}
            100% {background-position: calc(100% + 100px) 0px;}
        }
        #image {
            background-image: url('http://newsdale.ru/images/stories/other/0408091002.jpg');
            background-repeat: no-repeat;
            background-position: 100% top;
            width: 300px;
            height: 300px;
        }
        #image:hover {
            animation: keys 3s linear 1;
        }
    </style>
    <body>
        <div id="image"></div>
    </body>
<html>

@kastracci · 04.02.2015, 06:24

напишите отдельный код специально для IE. Разные браузеры видят сайты по-разному, всем это известно. Особенно Internet Explorer.

@doomeCK · 04.02.2015, 11:08 **[ТС]**

kastracci, что именно написать? Насколько я знаю, IE должен спокойно распознавать функцию calc.

@whiteapps · 04.02.2015, 12:01

doomeCK, это известный баг ie
в целом он понимает calc(), но не для css анимации

@doomeCK · 04.02.2015, 12:07 **[ТС]**

И как-нибудь это решается?

@whiteapps · 04.02.2015, 15:17

doomeCK, js

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 была полностью переписана на Си, в. . .

@kastracci 1 / 1 / 7 Регистрация: 28.01.2015 Сообщений: 89
	04.02.2015, 06:24
	Сообщение было отмечено whiteapps как решение Решение напишите отдельный код специально для IE. Разные браузеры видят сайты по-разному, всем это известно. Особенно Internet Explorer. 0

@doomeCK 0 / 0 / 0 Регистрация: 04.02.2015 Сообщений: 11
	04.02.2015, 11:08 [ТС]
	kastracci, что именно написать? Насколько я знаю, IE должен спокойно распознавать функцию calc. 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	04.02.2015, 12:01
	doomeCK, это известный баг ie в целом он понимает calc(), но не для css анимации 0

@doomeCK 0 / 0 / 0 Регистрация: 04.02.2015 Сообщений: 11
	04.02.2015, 12:07 [ТС]
	И как-нибудь это решается? 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	04.02.2015, 15:17
	doomeCK, js 0

CSS keyframes

Решение