Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.93/15: Рейтинг темы: голосов - 15, средняя оценка - 4.93
 Аватар для Ozymandius
1 / 1 / 1
Регистрация: 15.08.2012
Сообщений: 60

Кроссбраузерность CSS анимации. Как?

15.09.2014, 07:59. Показов 3030. Ответов 6
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Здравствуйте, уважаемые!
Такой вопрос. Вот делаю я класс с анимацией текста к примеру
CSS
1
2
3
4
5
6
7

.class_1 {
    -webkit-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -moz-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -o-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -ms-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    animation-iteration-count: 1;}
Работает только свойство -moz-animation, соответственно в мозиле. Во всех остальных браузерах ноль реакции. Подскажите, что не так? Где накосячил?
Спасибо!
0
Лучшие ответы (1)
Сообщение: #6608139
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 15.09.2014, 07:59
Ответы с готовыми решениями:

Кроссбраузерность формы входа на css
Здравствуйте! При создании формы входа на сайт столкнулся с проблемой: кнопка формы в разных браузерах отображается по разному. Первая...

Как сделать задержку, перед проигрыванием анимации css?
Для анимации формы-всплывашки использую keyframe и js для эффекта проявления и затухания. Как можно сделать задержку перед открытием...

Css анимации
Возникла проблема, есть анимация рулетки, запускается тогда, когда таймер 0, так вот, если юзер в это время на другой вкладке, а потом во...

6
 Аватар для monochromer
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
15.09.2014, 09:26
С анимацией всегда сопутствует @keyframes. Они тоже пишутся с префиксами.
если проанализировать табличку http://caniuse.com/#search=keyframes, то видно, что префиксы актуальны только для -webkit
0
 Аватар для Ozymandius
1 / 1 / 1
Регистрация: 15.08.2012
Сообщений: 60
15.09.2014, 09:48  [ТС]
Ну так как быть? Чтобы везде работало?

Добавлено через 9 минут
И почему работает в мозиле без @keyframes? Ссылка
0
 Аватар для monochromer
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
15.09.2014, 09:53
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13

.with-animation {
    -webkit-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980) 1;
    -moz-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980) 1; /* FF <= 15 */
    -o-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980) 1; /* Opera 12 */
    -ms-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980) 1;
    animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980) 1;
}
 
@-webkit-keyrames rotateWord {}
@-moz-keyrames rotateWord {}
@-ms-keyrames rotateWord {}
@-o-keyrames rotateWord {}
@keyrames rotateWord {}
0
 Аватар для Ozymandius
1 / 1 / 1
Регистрация: 15.08.2012
Сообщений: 60
15.09.2014, 10:57  [ТС]
Если rotateWord - это keyframe, как его правильно прописать для всех браузеров?

Добавлено через 1 минуту
понял, спс) попробую

Добавлено через 56 минут
Выкладываю полностью фрагмент кода. Сделал так:
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

.headline_1 {
    -webkit-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -moz-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -o-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -ms-animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    animation: rotateWord 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    animation-iteration-count: 1;}
.headline_2 {
    -webkit-animation: rotateWord1 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -moz-animation: rotateWord1 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -o-animation: rotateWord1 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -ms-animation: rotateWord1 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    animation: rotateWord1 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    animation-iteration-count: 1;
    -moz-animation-delay: 0.3s;
    opacity: 0;}
.headline_2a {
    -webkit-animation: rotateWord2 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -moz-animation: rotateWord2 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -o-animation: rotateWord2 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    -ms-animation: rotateWord2 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    animation: rotateWord2 0.8s forwards cubic-bezier(0.000, 0.615, 0.475, 0.980);
    animation-iteration-count: 1;
    -moz-animation-delay: 0.6s;     
    opacity: 0;}
.fadeword {
    -webkit-animation: fadeword 0.6s forwards ease-out;
    -moz-animation: fadeword 0.6s forwards ease-out;
    -o-animation: fadeword 0.6s forwards ease-out;
    -ms-animation: fadeword 0.6s forwards ease-out;
    animation: fadeword 0.6s forwards ease-out;
    animation-iteration-count: 1;
    -moz-animation-delay: 1.3s;     
    opacity: 0;}
 
@-moz-keyframes rotateWord {
    0% { opacity: 0;  -moz-transform: translateY(-300px); }
    99% { opacity: 1; -moz-transform: translateY(0px); }
    100% {opacity: 1; -moz-transform: translateY(0px) ; }
}
@-moz-keyframes rotateWord1 {
    0% { opacity: 0;  -moz-transform: translateX(300px); }
    99% { opacity: 1; -moz-transform: translateX(0px); }
    100% {opacity: 1; -moz-transform: translateX(0px) ; }
}
@-moz-keyframes rotateWord2 {
    0% { opacity: 0;  -moz-transform: translateY(-300px); }
    99% { opacity: 1; -moz-transform: translateY(0px); }
    100% {opacity: 1; -moz-transform: translateY(0px) ; }
}
@-moz-keyframes fadeword {
    0% { opacity: 0;}
    99% { opacity: 1;}
    100% {opacity: 1;}
}
 
@-webkit-keyframes rotateWord {
    0% { opacity: 0;  -moz-transform: translateY(-300px); }
    99% { opacity: 1; -moz-transform: translateY(0px); }
    100% {opacity: 1; -moz-transform: translateY(0px) ; }
}
@-webkit-keyframes rotateWord1 {
    0% { opacity: 0;  -moz-transform: translateX(300px); }
    99% { opacity: 1; -moz-transform: translateX(0px); }
    100% {opacity: 1; -moz-transform: translateX(0px) ; }
}
@-webkit-keyframes rotateWord2 {
    0% { opacity: 0;  -moz-transform: translateY(-300px); }
    99% { opacity: 1; -moz-transform: translateY(0px); }
    100% {opacity: 1; -moz-transform: translateY(0px) ; }
}
@-webkit-keyframes fadeword {
    0% { opacity: 0;}
    99% { opacity: 1;}
    100% {opacity: 1;}
}
 
@-o-keyframes rotateWord {
    0% { opacity: 0;  -moz-transform: translateY(-300px); }
    99% { opacity: 1; -moz-transform: translateY(0px); }
    100% {opacity: 1; -moz-transform: translateY(0px) ; }
}
@-o-keyframes rotateWord1 {
    0% { opacity: 0;  -moz-transform: translateX(300px); }
    99% { opacity: 1; -moz-transform: translateX(0px); }
    100% {opacity: 1; -moz-transform: translateX(0px) ; }
}
@-o-keyframes rotateWord2 {
    0% { opacity: 0;  -moz-transform: translateY(-300px); }
    99% { opacity: 1; -moz-transform: translateY(0px); }
    100% {opacity: 1; -moz-transform: translateY(0px) ; }
}
@-o-keyframes fadeword {
     0% { opacity: 0;}
    99% { opacity: 1;}
    100% {opacity: 1;}}
    
@-ms-keyframes rotateWord {
    0% { opacity: 0;  -moz-transform: translateY(-300px); }
    99% { opacity: 1; -moz-transform: translateY(0px); }
    100% {opacity: 1; -moz-transform: translateY(0px) ; }
}
@-ms-keyframes rotateWord1 {
    0% { opacity: 0;  -moz-transform: translateX(300px); }
    99% { opacity: 1; -moz-transform: translateX(0px); }
    100% {opacity: 1; -moz-transform: translateX(0px) ; }
}
@-ms-keyframes rotateWord2 {
    0% { opacity: 0;  -moz-transform: translateY(-300px); }
    99% { opacity: 1; -moz-transform: translateY(0px); }
    100% {opacity: 1; -moz-transform: translateY(0px) ; }
}
@-ms-keyframes fadeword {
     0% { opacity: 0;}
    99% { opacity: 1;}
    100% {opacity: 1;}}
    
@keyframes rotateWord {
    0% { opacity: 0;  -moz-transform: translateY(-300px); }
    99% { opacity: 1; -moz-transform: translateY(0px); }
    100% {opacity: 1; -moz-transform: translateY(0px) ; }
}
@keyframes rotateWord1 {
    0% { opacity: 0;  -moz-transform: translateX(300px); }
    99% { opacity: 1; -moz-transform: translateX(0px); }
    100% {opacity: 1; -moz-transform: translateX(0px) ; }
}
@keyframes rotateWord2 {
    0% { opacity: 0;  -moz-transform: translateY(-300px); }
    99% { opacity: 1; -moz-transform: translateY(0px); }
    100% {opacity: 1; -moz-transform: translateY(0px) ; }
}
@keyframes fadeword {
     0% { opacity: 0;}
    99% { opacity: 1;}
    100% {opacity: 1;}
    }
Один хрен не работает... Только в мозиле!

0
 Аватар для monochromer
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
15.09.2014, 11:04
Лучший ответ Сообщение было отмечено Ozymandius как решение

Решение

Потому что для всех трансформаций прописаны -moz-.
1
 Аватар для Ozymandius
1 / 1 / 1
Регистрация: 15.08.2012
Сообщений: 60
15.09.2014, 11:09  [ТС]
Вот я дебил... Точно!!!!

Добавлено через 2 минуты
Вчера просто на свадьбе был(((

Добавлено через 40 секунд
Спасибо ОГРОМНОЕ))
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 15.09.2014, 11:09
Помогаю со студенческими работами здесь

Ошибка анимации css
Вот кусок кода css. Это анимация css3. На сайте всё работает, но не проходит валидацию. Пишет - Извините, но правило @-webkit (moz)...

Создание анимации текста на css
Всем доброго времени суток! Начал изучать анимацию на css и хотелось бы разобраться кое в чем. Хочу сделать так, чтобы в зависимости от...

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

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

Единоразовое выполнение анимации в CSS
Всем Доброго времени суток. Относительно недавно начал изучать web-разработки, опыта не так много на данный момент, всего по чуть-чуть....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Философия технологии
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(), которая. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru