Почему не работает анимация на ipone?

Question

[Вазген Алексанян]

.mobile_phone_block_bg_anim{
position: absolute;
left: 50%;
top: 50%;
display: block;
width: 56px;
height: 56px;
opacity: 0;
background-color: rgb(213, 240, 253, .35);
z-index: 999;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: z_mob_phone_anim 3s linear infinite;
animation: z_mob_phone_anim 3s linear infinite;
}

@keyframes z_mob_phone_anim{
0%{
opacity: 1;
}
15%{
width: 90px;
height: 90px;
}
40%{
width: 90px;
height: 90px;
}
55%{
opacity: 1;
}
70%{
width: 140px;
height: 140px;
opacity: 0;
}
100%{
opacity: 0;
}
}

Answer 1

[iDevArtem]

Попробуй добавить еще один keyframes, но с префиксом -webkit-

@-webkit-keyframes z_mob_phone_anim {
    ...
}

Comments

[Вазген Алексанян]

-webkit- естественно добавлен. просто тут не написал чтобы длинным не был. Если имеется айфон вот сайт можете посмотреть https://slclinic.ru/
это применил над трубкой. правый нижний угол .

[iDevArtem]

начальное значение для opacity нужно выставить 1

.mobile_phone_block_bg_anim {
    ...
    opacity: 1;
    ...
}

[Вазген Алексанян]

и из за это в айфоне может не работать? а на всех других устройствах работать?

[iDevArtem]

VazgXa, прикинь =)

[Вазген Алексанян]

поправил и очистил кеши. Если у тебя айфон, не посмотришь поправился?

[iDevArtem]

почти... уже на финишной прямой)

прозрачность фона указывается через rgba, а не rgb

.mobile_phone_block_bg_anim {
    ...
    background-color: rgba(213, 240, 253, .35);
    ...
}

[Вазген Алексанян]

Ну конечно через rgba. спасибо

[Дмитрий Чайников]

Не пробовали на iPhone в Google Chrome?

[Вазген Алексанян]

Дмитрий Чайников, В chrome не пробовал, но в safari работает

[iDevArtem]

Дмитрий Чайников, хром на ифоне тоже норм

[Дмитрий Чайников]

ArtemDoink, Можно и так:.

background-color: rgb(213,240,253);
opacity: 0.35;

[Вазген Алексанян]

Дмитрий Чайников, ArtemDoink, Ладно, раз уж написали столько про rgb - тогда скажите где он может быть полезен? Ведь можем просто написать на 16-и речном формате.
Но с одной просьбой, не искать в гугле(хотя я не разу не искал и не знаю что там найдете).

[iDevArtem]

VazgXa, думаю нет разницы, кто как привык

[iDevArtem]

Дмитрий Чайников, да, по возможности лучше изменять через opacity, ибо на слабых устройствах изменения фона может тупить
но это не 100% =)

[Вазген Алексанян]

ArtemDoink, Ну скажем так когда цвет генерируешь с помощью Math.round(Math.random()), тогда удобнее всего использовать rgb(). так возможны все цвета.