В мозиле тормозит анимация с transition и animation
268
22 марта 2018, 06:59
В Firefox в версии 59.0.1 на Windows 10 тормозит анимация. В Chrome и Edge таких тормозов нет.
Тормоза - дерганные изменения свойств.
Также, иногда элементы .stack__deco, которые "сзади" залазят на передний край во время анимации.
Как нибудь можно поправить? Или я не правильно использую анимацию?
Пример 1. С transition.
.stack {
position: relative;
max-width: 100%;
}
.stack .stack-image,
.stack .stack-image-content {
position: relative;
display: inline-block;
font-size: 0;
max-width: 100%;
}
.stack .stack-image-content {
overflow: hidden;
}
.stack .stack-image-content img,
.stack .stack-image-content svg {
max-width: none;
position: relative;
}
.hover-stack {
position: relative;
transform-style: preserve-3d;
perspective: 800px;
perspective-origin: 50% 200%;
}
.hover-stack .hover-stack-image-container {
transform-origin: 50% 100%;
}
.hover-stack .stack__deco {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: 50% 100%;
border-radius: inherit;
}
.hover-stack.DenebFx {
perspective: none;
perspective-origin: 50% 100%;
}
.hover-stack.DenebFx .stack__deco {
transform-origin: 50% 50%;
}
.hover-stack.DenebFx .hover-stack-image-container {
transform-origin: 50% 50%;
}
.hover-stack.PolarisFx {
perspective-origin: 200% -100%;
}
.hover-stack.PolluxFx {
perspective: 1000px;
perspective-origin: 50% -70%;
}
.hover-stack.PolluxFx .stack__deco {
transform-origin: 50% 50%;
}
.hover-stack.PolluxFx .hover-stack-image-container {
transform-origin: 50% 50%;
}
.hover-stack.AltairFx {
perspective-origin: 50% -50%;
}
.hover-stack.RigelFx .stack__deco {
opacity: 0;
transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1);
transition-property: transform;
transform: translateY(0) translateZ(0);
}
.hover-stack.RigelFx .hover-stack-image-container {
transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(0) translateZ(0);
}
.hover-stack.RigelFx .hover-stack-image-container img,
.hover-stack.RigelFx .hover-stack-image-container svg {
transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(0) translateZ(0);
}
.hover-stack.RigelFx.hover-stack-run-animate .stack__deco:nth-child(1),
.hover-stack.RigelFx:hover .stack__deco:nth-child(1) {
transform: translateY(0) translateZ(0);
opacity: 0.1;
}
.hover-stack.RigelFx.hover-stack-run-animate .stack__deco:nth-child(2),
.hover-stack.RigelFx:hover .stack__deco:nth-child(2) {
transform: translateY(-10px) translateZ(10px);
opacity: 0.2;
}
.hover-stack.RigelFx.hover-stack-run-animate .stack__deco:nth-child(3),
.hover-stack.RigelFx:hover .stack__deco:nth-child(3) {
transform: translateY(-20px) translateZ(20px);
opacity: 0.3;
}
.hover-stack.RigelFx.hover-stack-run-animate .stack__deco:nth-child(4),
.hover-stack.RigelFx:hover .stack__deco:nth-child(4) {
transform: translateY(-30px) translateZ(30px);
opacity: 0.4;
}
.hover-stack.RigelFx.hover-stack-run-animate .hover-stack-image-container,
.hover-stack.RigelFx:hover .hover-stack-image-container {
transform: translateY(-40px) translateZ(40px);
}
.hover-stack.hover-stack-enable-scale.RigelFx.hover-stack-run-animate .hover-stack-image-container img,
.hover-stack.hover-stack-enable-scale.RigelFx:hover .hover-stack-image-container img,
.hover-stack.hover-stack-enable-scale.RigelFx.hover-stack-run-animate .hover-stack-image-container svg,
.hover-stack.hover-stack-enable-scale.RigelFx:hover .hover-stack-image-container svg {
transform: scale(0.7);
}<br>
<br>
<br>
<br>
<div class="stack" style="text-align: center;">
<div class="stack-image selectable hover-stack-enable-scale hover-stack RigelFx" il-type="settings" settings="data.icon" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" title="" alt="">
<div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div>
<div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div>
<div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div>
<div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div>
<div class="stack-image-content hover-stack-image-container" style="width: 200px; height: 200px; border-radius: 50%;"><img src="https://vemco.com/wp-content/uploads/2012/09/image-banner2.jpg" style="border-radius: 50%; width: 285.714px; height: 285.714px; left: -42.8571px; top: -42.8571px;"></div>
</div>
</div>Пример 2. С animation.
.stack {
position: relative;
max-width: 100%;
}
.stack .stack-image,
.stack .stack-image-content {
position: relative;
display: inline-block;
font-size: 0;
max-width: 100%;
}
.stack .stack-image-content {
overflow: hidden;
}
.stack .stack-image-content img,
.stack .stack-image-content svg {
max-width: none;
position: relative;
}
.hover-stack {
position: relative;
transform-style: preserve-3d;
perspective: 800px;
perspective-origin: 50% 200%;
}
.hover-stack .hover-stack-image-container {
transform-origin: 50% 100%;
}
.hover-stack .stack__deco {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: 50% 100%;
border-radius: inherit;
}
.hover-stack.DenebFx {
perspective: none;
perspective-origin: 50% 100%;
}
.hover-stack.DenebFx .stack__deco {
transform-origin: 50% 50%;
}
.hover-stack.DenebFx .hover-stack-image-container {
transform-origin: 50% 50%;
}
.hover-stack.PolarisFx {
perspective-origin: 200% -100%;
}
.hover-stack.PolluxFx {
perspective: 1000px;
perspective-origin: 50% -70%;
}
.hover-stack.PolluxFx .stack__deco {
transform-origin: 50% 50%;
}
.hover-stack.PolluxFx .hover-stack-image-container {
transform-origin: 50% 50%;
}
.hover-stack.AltairFx {
perspective-origin: 50% -50%;
}
.hover-stack.AltairFx .stack__deco {
opacity: 0;
}
@keyframes altair-image {
0% {
transform: translateZ(0) rotateX(0);
}
20% {
transform: translateZ(18px) rotateX(-24deg);
}
100% {
transform: translateZ(12px) rotateX(-16deg);
}
}
@keyframes altair-2 {
0% {
transform: translateZ(0) rotateX(0);
}
20% {
transform: translateZ(6px) rotateX(-8deg);
}
100% {
transform: translateZ(3px) rotateX(-4deg);
}
}
@keyframes altair-3 {
0% {
transform: translateZ(0) rotateX(0);
}
20% {
transform: translateZ(9px) rotateX(-12deg);
}
100% {
transform: translateZ(6px) rotateX(-8deg);
}
}
@keyframes altair-4 {
0% {
transform: translateZ(0) rotateX(0);
}
20% {
transform: translateZ(12px) rotateX(-16deg);
}
100% {
transform: translateZ(9px) rotateX(-12deg);
}
}
.hover-stack.AltairFx .hover-stack-image-container img,
.hover-stack.AltairFx .hover-stack-image-container svg {
transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.hover-stack.AltairFx.hover-stack-run-animate .stack__deco:nth-child(1),
.hover-stack.AltairFx:hover .stack__deco:nth-child(1) {
opacity: 0.2;
transition-delay: 120ms;
}
.hover-stack.AltairFx.hover-stack-run-animate .stack__deco:nth-child(2),
.hover-stack.AltairFx:hover .stack__deco:nth-child(2) {
opacity: 0.4;
animation: altair-2 1400ms 90ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.hover-stack.AltairFx.hover-stack-run-animate .stack__deco:nth-child(3),
.hover-stack.AltairFx:hover .stack__deco:nth-child(3) {
opacity: 0.6;
animation: altair-3 1400ms 60ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.hover-stack.AltairFx.hover-stack-run-animate .stack__deco:nth-child(4),
.hover-stack.AltairFx:hover .stack__deco:nth-child(4) {
opacity: 0.8;
animation: altair-4 1400ms 30ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.hover-stack.AltairFx.hover-stack-run-animate .hover-stack-image-container,
.hover-stack.AltairFx:hover .hover-stack-image-container {
animation: altair-image 1400ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.hover-stack.hover-stack-enable-scale.AltairFx.hover-stack-run-animate .hover-stack-image-container img,
.hover-stack.hover-stack-enable-scale.AltairFx:hover .hover-stack-image-container img,
.hover-stack.hover-stack-enable-scale.AltairFx.hover-stack-run-animate .hover-stack-image-container svg,
.hover-stack.hover-stack-enable-scale.AltairFx:hover .hover-stack-image-container svg {
transform: scale(0.7);
}<br>
<br>
<br>
<br>
<div class="stack" style="text-align: center;">
<div class="stack-image selectable hover-stack-enable-scale hover-stack AltairFx" il-type="settings" settings="data.icon" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" title="" alt="">
<div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div>
<div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div>
<div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div>
<div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div>
<div class="stack-image-content hover-stack-image-container" style="width: 200px; height: 200px; border-radius: 50%;"><img src="https://vemco.com/wp-content/uploads/2012/09/image-banner2.jpg" style="border-radius: 50%; width: 285.714px; height: 285.714px; left: -42.8571px; top: -42.8571px;"></div>
</div>
</div>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47907 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30567 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23895 visits
- Как через css изменить цвет png изображения? 10398 visits
- Blob video url download 10004 visits
- Php curl запрос через прокси с авторизацией 9276 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 24.3.2025 | 17:52