Кросбраузерность opacity для @keyframes

@SD163 · Регистрация: 25.08.2018

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

Сколько смотрю, пишут так

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@-webkit-keyframes ANIMATION_NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes ANIMATION_NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes ANIMATION_NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ANIMATION_NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
#element {
  -webkit-animation: ANIMATION_NAME 5s infinite;
  -moz-animation: ANIMATION_NAME 5s infinite;
  -o-animation: ANIMATION_NAME 5s infinite;
  animation: ANIMATION_NAME 5s infinite;
}

но если прозрачность просто в классе, то

CSS
1
2
3
4
5
.element {
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}

Вопрос - может все таки, если

CSS
1
2
3
4
@keyframes ANIMATION_NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}

то прописывать так?

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
@-webkit-keyframes ANIMATION_NAME {
    0% { 
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; 
    }
    100% {  
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    }
}
@-moz-keyframes ANIMATION_NAME {
    0% { 
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; 
    }
    100% {  
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    }
}
@-o-keyframes ANIMATION_NAME {
    0% { 
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; 
    }
    100% {  
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    }
}
@keyframes ANIMATION_NAME {
    0% { 
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; 
    }
    100% {  
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    }
}
#element {
  -webkit-animation: ANIMATION_NAME 5s infinite;
  -moz-animation: ANIMATION_NAME 5s infinite;
  -o-animation: ANIMATION_NAME 5s infinite;
  animation: ANIMATION_NAME 5s infinite;
}

или это лишнее?

CSS
1
2
3
4
5
6
7
8
9
10
 0% { 
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; 
    }
    100% {  
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    }

Добавлено через 3 минуты
Может есть аргумент и где найти - почитать, почему внутри @keyframes не нужно писать префиксы для opacity?

@mrtoxas · 06.04.2019, 15:05

Если браузер поддерживает keyframes, то он уже по возрасту знает об opacity.

opacity - firefox 1, IE 9, Opera 9, Safari 1.2
keyframes - firefox 5, IE 10, Opera 15, Safari 4

@SD163 · 06.04.2019, 16:18 **[ТС]**

mrtoxas, получается, если в @-webkit-keyframes

CSS
1
2
3
4
@-webkit-keyframes ANIMATION_NAME {
0% { opacity: 0; }
100% { opacity: 1; }
}

то в отдельных классах пишим

CSS
1
2
3
.element {
opacity: 0.5;
}

Если в

CSS
1
2
3
4
5
.element {
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}

тогда в @-webkit-keyframes

CSS
1
2
3
4
5
6
7
8
9
10
11
12
@-webkit-keyframes ANIMATION_NAME {
    0% { 
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; 
    }
    100% {  
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    }
}

а иначе мешанина получается
Правильно понимаю?

@mrtoxas · 06.04.2019, 16:29

Установите autofrefixer и загрузите голову чем-то более полезным

Добавлено через 7 минут

CSS
1
2
3
4
5
6
7
8
9
10
11
12
@-webkit-keyframes ANIMATION_NAME {
    0% { 
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; 
    }
    100% {  
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    }
}

Вот это бессмысленно. Если браузер поймет keyframes (с префиксами или без), то он определенно уже знает что такое opacity и без префиксов. Если браузер не понимает что такое keyframes, то до кадров с opacity он не дойдет.
Вы можете так писать, но смысла в этом нет никакого.

@SD163 · 06.04.2019, 21:13 **[ТС]**

mrtoxas,
keyframes - Safari 4, т.е. @keyframes
если младше, надо @-webkit-keyframes

opacity - Safari 1.2 т.е. opacity
если младше, надо -webkit-opacity

Получается для Safari 4:

CSS
1
2
3
4
5
6
7
8
@keyframes ANIMATION_NAME {
    0% { 
    opacity: 1; 
    }
    100% {  
    opacity: 0;
    }
}

CSS
1
2
3
.element {
opacity: 0.5;
}

для Safari 1.2:
@-webkit-keyframes ANIMATION_NAME {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

CSS
1
2
3
.element {
opacity: 0.5;
}

Теперь ясно, если правильно понял - подтвердите пожалуйста

Не по теме:

mrtoxas, autofrefixe - только что пытался разобраться с ним - пока не получилось.
1- скачал nodejs и gulp, т.к. autofrefixe работает на gulp (так понял)
2- запустил командную строку nodejs
3- npm install --global gulp
4- cd F:\TESTGALP
5- npm init
5a- home (после 5- npm init пропустил только эту команду)
6- npm install gulp --save-dev
дальше ни понятно

mrtoxas, пишу в простой проге nodepade++ и в него наверное ни как не поставить autofrefixe. Так, то понимаю надо автоматом и далее надо смотреть в сторону SCSS

mrtoxas, Как считаете - онлайн?
http://autoprefixer.github.io/ru/
По моему отлично делает.
И устанавливать не надо.
Если фильтр 100, то вообще самые старые добавляет, если кому нужно.
SCSS поставил в nodpade++ через ruby, норм работает - сразу делает копию в css.

буду пробовать autofrefixe через brackets, что то через gulp сложно как то.

Новые блоги и статьи Все статьи Все блоги /
Философия технологии 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 - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	06.04.2019, 15:05
	Сообщение было отмечено SD163 как решение Решение Если браузер поддерживает keyframes, то он уже по возрасту знает об opacity. opacity - firefox 1, IE 9, Opera 9, Safari 1.2 keyframes - firefox 5, IE 10, Opera 15, Safari 4 1

Кросбраузерность opacity для @keyframes

Решение